在Laravel的造型桌

I have a problem with @foreach in my blade.php. When I insert movie with multiple categories my other moves to the right. Here is how it looks in browser and here is code in blade

  @if($movies)
  <div class="row">
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Categories</th>
          <th>Actors</th>
        </tr>
      </thead>
      <tbody>
        @foreach($movies as $movie)
          <tr>
              <td><a href="{{ route('mov.edit', $movie->id) }}">{{$movie->name}}</a></td>
          @foreach($movie->categories as $category)
              <td><a href="{{ route('cat.edit', $category->id) }}">{{$category->category_name}}</a></td> 
          @endforeach
          @foreach($movie->actors as $actor)
              <td><a href="{{ route('act.edit', $actor->id) }}">{{$actor->actor_name}}</a></td>
          @endforeach
          </tr>
        @endforeach
      </tbody>
    </table>
    @endif

Your issue lies here:

@foreach($movie->categories as $category)
    <td><a href="{{ route('cat.edit', $category->id) }}">{{$category->category_name}}</a></td> 
@endforeach

You are saying that for each category, it should insert a new <td> into you table. This will of course skew the content since your table expects a set number of columns.

Instead, you should move your foreach statement inside the <td></td>

<td>
    @foreach($movie->categories as $category)
        <a href="{{ route('cat.edit', $category->id) }}">{{$category->category_name}}</a> 
    @endforeach
</td>

This will print the links for each category in the same column.