Make HTML <td> similar to Zurbs responsive tables

Question

So, I want to have a table with fixed heights of <tr>'s and have very long <td>'s being "continued" similar to Zurb Responsive Tables but for a normal web browser(not on a phone).

<table>
    <tbody>
        <tr>
            <td>Hello</td>
            <td><div>This is a div in a td with a longer text</div></td>
            <td><div>This is aaaaaaaaaaaalso a td with a looong word</div></td>
            <td>Normal sized td</td>
        </tr>
    </tbody>
</table>

This new example shows exactly what my problem is: jsfiddle

The date column has to be as small as it is.

Does anyone know how to do this (preferably without any javascript)?

Answer 1

I am not sure what are you trying to do but have a look at white-space:nowrap and table-layout: fixed .

Your css could be like this

table {
  table-layout: fixed;  
}    

td {
  overflow: hidden;
  border: 1px solid;
  height: 50px;
  padding: 5px;
  white-space:nowrap;
}

For exmaple for fixed width of <td> s add width: 30% to style for <td> .

Answer 2

Take a look at this fiddle link this will help you to get the table like Zurb Responsive Tables . and i just made some changes only in css

td {
  overflow: hidden;
  border: 1px;   
    border-color:none;
  height: 50px;
  padding: 5px;
  white-space:nowrap;
}

for alternate row colors,you may use this

$("tr:even").css("background-color", "rgb(225,225,225)");
$("tr:odd").css("background-color", "#ffffff");

i hope this will help you more.

Answer 3

Not sure what you are trying to do, but when you mean longer do you want to have it horizontally wide or just vertically? As the 2 answers above do not give you

  Width:75%;

Which would expand according to the text and not break down into a new line, which basically would make your webpage go just horizontally rather than breaking it down into a new line as the content gets inputted.

So, basically if you want to expand it widely as well, then just add

  Width: [amount of px you want or % of page]

On the .css or inside the

  <td width="75%">

Not sure if this is what you are looking for.