ThunderBirdsX3 ThunderBirdsX3 - 27 days ago 3
CSS Question

How do text-overflow in this case

I want to text-over flow data in this table, I try a lot of way to make it work. But Some way it also work in Firefox and i want to make it work in IE.

And the way is not use bootstarp, To make it done.

What the right css to use in this case.

This is an example of my css code.



.table {
width: 450px;
max-width: 450px;
}
.col-1 {
width: 30%;
max-width: 30%;
overflow: hidden;
text-overflow: clip !important;
white-space: nowrap;
word-wrap: break-word;
}
.col-2 {
width: 40%;
max-width: 40%;
overflow: hidden;
text-overflow: clip !important;
white-space: nowrap;
word-wrap: break-word;
}
.col-3 {
width: 30%;
max-width: 30%;
overflow: hidden;
text-overflow: clip !important;
white-space: nowrap;
word-wrap: break-word;
}

<table class="table" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td class="col-1">longgggggggggggggg gggggggggggg</td>
<td class="col-2">longgggggggggggggg ggggggggggggg</td>
<td class="col-3">longgggggggggggggg ggggggggggggg</td>
</tr>
<tr>
<td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
<td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
<td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
</tr>
<tr>
<td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
<td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
<td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
</tr>
</tbody>
</table>





Thank you for helping.

Answer

By default, table cells are required to be as wide as their content.

But you can use table-layout: fixed to switch to a faster and more reliable layout mode which ignores the content.

.table {
  width: 450px;
  table-layout: fixed;
}
td {
  overflow: hidden;
  white-space: nowrap;
}
.col-1, .col-3 {
  width: 30%;
}
.col-2 {
  width: 40%;
}
<table class="table" border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td class="col-1">longgggggggggggggg gggggggggggg</td>
      <td class="col-2">longgggggggggggggg ggggggggggggg</td>
      <td class="col-3">longgggggggggggggg ggggggggggggg</td>
    </tr>
    <tr>
      <td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
      <td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
      <td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td>
    </tr>
    <tr>
      <td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
      <td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
      <td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td>
    </tr>
  </tbody>
</table>