CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dominic Bridge
Dominic Bridge

Reputation: 13

Text breaking table

I'm trying to build a table, and as you can see, it has two rows. Ignore the @ and {{ }} codes. They are just templating engine stuff. My problem is that, whenever I place large text instead of {{ $tournament->tournamentDescription }}, it really expands my entire table, and goes out of the bootstrap col-md-8 and overlaps the col-md-4 after it. I tried adding this class:

.nested-item {
    word-wrap: break-word;
    overflow: auto;
}

JSFiddle: http://jsfiddle.net/ucbmk79v/

But it didn't seem to work. This is my HTML:

<div class="col-md-8">
            <h1>Tournaments Listing</h1>
            <table id="tournamentlist" class="display" style="max-width:100%">
            <thead>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </tfoot>
            <tbody>
            @foreach($options['tournaments'] as $tournament)
            <tr role="row">
                <td class="details-control"></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->tournamentName }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->creator }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{$tournament->playercount}}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->noOfParticipants }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->entranceFee }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->game }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->gamePlatform }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->teamType }}</a></td> 
            </tr>
            <tr>
                <td colspan="9">
                    <table cellpadding="5" cellspacing="0" border="0" class="col-md-8">
                        <tbody>
                            <tr class="nested-item">
                                <td>Description:</td>
                                <td>{{ $tournament->tournamentDescription }}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            @endforeach
            </tbody>
            </table>
        </div>

Upvotes: 1

Views: 63

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

word-wrap: break-word is not enough. Use word-break: break-all to ensure the word-wrap actually is executed also on long or odd "non-breakable" strings :

table tbody td {
   white-space: normal;
   word-wrap: break-word;
   word-break: break-all; 
}

The demo:

table tbody td {
   white-space: normal;
   word-wrap: break-word;
   word-break: break-all; 
}
<div class="row">
    <div class="col-md-8">
            <h1>Tournaments Listing</h1>
            <table id="tournamentlist" class="display" style="max-width:100%">
            <thead>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th></th>
                <th>Tournament Name </th>
                <th>Creator</th>
                <th>Number of Players</th>
                <th>Number of Players</th>
                <th>Entrance Fee</th>
                <th>Game</th>
                <th>Platform</th>
                <th>Entry Type</th>
            </tr>
            </tfoot>
            <tbody>
            @foreach($options['tournaments'] as $tournament)
            <tr role="row">
                <td class="details-control"></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->tournamentName }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->creator }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{$tournament->playercount}}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->noOfParticipants }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->entranceFee }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->game }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->gamePlatform }}</a></td>
                <td><a href="{{ $websiteURL }}/tournaments/{{ $tournament->id }}">{{ $tournament->teamType }}</a></td> 
            </tr>
            <tr>
                <td colspan="9">
                    <table cellpadding="5" cellspacing="0" border="0" class="col-md-8">
                        <tbody>
                            <tr class="nested-item">
                                <td>Description:</td>
                                <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            @endforeach
            </tbody>
            </table>
  </div>
  <div class="col-md-4">
    Hi
  </div>
</div>

updated fiddle -> http://jsfiddle.net/ucbmk79v/4/

Upvotes: 1

Related Questions