Question

I have a table with two columns. The width of the 2 columns are set and should not be modified. The first column contains 2 spans standing side by side. The content of the first span has a variable length. The second span also. What I would like to do is to hide the overflow of the second span when the content hits the border. I tried several things but I do not manage to find a solution. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

http://cssdesk.com/eAN3d

My HTML:

<table>
  <tr>
    <th>th1</th>
    <th>th2</th>
  </tr>
  <tr>
    <td>
      <span>Paul</span>
      <span class="hide-overflow">Some text with no overflow</span>
    </td>
    <td>txt</td>
  </tr>
  <tr>
    <td>
      <span>Emmanuelle</span>
      <span class="hide-overflow">The overflow of this text string has to be hidden.The td has to be only one line and the width should not be extended.</span>
    </td>
    <td>txt</td>
  </tr>
</table>

My CSS:

table{
  width:400px;
  border-spacing: 0px;
  border-collapse: collapse;}

th,td{
  border:1px solid black;}

td:first-child{
  width:350px;}

td:last-child{
  width:50px;}

.hide-overflow{
  background-color:yellow;
  }

Answer 1

I’m not incredibly happy with this, but it does seem to work in Firefox. jsFiddle

table{
  width:400px;
  border-spacing: 0px;
  border-collapse: collapse;
  table-layout:fixed;
}

th,td {
  border:1px solid black;
  white-space: nowrap;
}

th:first-child, td:first-child{
  width:350px;
  overflow:hidden;
}

th:last-child, td:last-child{
  width:50px;
}

.hide-overflow{
  background-color:yellow;
}

span.hide-overflow {
  white-space:nowrap;
}

This is the result: