いくつかの列を含むテーブルがあり、2 番目の列には多くのテキストが含まれているため、他の列が右に移動しすぎています。テーブルをそのままにしておきたいのですが、列にテキストが多すぎて切り取られないようにしたいです。table-layout:fixedまた、 and の使用を避けようとしていることにも言及する必要がありposition:absoluteます。これが私のコードです：
HTML :
<table id="messages_list" class="listing rows clickable">
<tbody>
<tr>
<th class="select"><input id="all" type="checkbox"></th>
<th class="from">To</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
<tr class="item even " data-thread-id="16">
<td class="first"><input class="checkbox" type="checkbox" name="id:16"></td>
<td>LastName, FirstName, LastName2, FirstName2, LastName3, FirstName3, LastName4, FirstName4</td>
<td>Hello</td>
<td class="last">07/16/2012 12:26</td>
</tr>
</tbody>
</table>
CSS :
table.listing {
border: 0;
border-spacing: 0;
width: 100%;
margin-bottom: 1em;
overflow: hidden;
white-space: nowrap;
}
table.listing th {
padding: 4px 8px;
font-size: 12px;
background: #002A80;
text-decoration: none !important;
color: white !important;
font-weight: bold;
text-align: left;
}
th.select {
width: 10px;
}
th.from { /* This is the column giving me problems */
width: 20%;
overflow: hidden;
}
th.date {
width: 1%;
}