Question

所以，我希望有一个固定高度为<tr>'s的表，并且很长<td>'s与Zurb Responsive Tables类似“继续”，但对于普通的网络浏览器（不是电话）。

<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>

这个新示例准确显示了我的问题：jsfiddle

日期列必须尽可能小。

有谁知道如何做到这一点（最好没有任何javascript）？

Answer 1

我不确定您要做什么，但请查看white-space:nowrap和table-layout: fixed。

你的CSS可能是这样的

table {
  table-layout: fixed;  
}    

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

对于<td>的固定宽度，请为width: 30%的样式添加<td>。

Answer 2

请看一下这个fiddle链接，这有助于您获得Zurb Responsive Tables这样的表格。我只是在css中做了一些改变

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

对于备用行颜色，您可以使用此

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

我希望这会对你有所帮助。

Answer 3

不确定你要做什么，但是如果你的意思更长，你想要横向宽或垂直吗？由于上面的2个答案没有给你

  Width:75%;

哪个会根据文字进行扩展而不会分解成一个新行，这基本上会使您的网页只是水平移动，而不是在内容输入时将其分解为新行。

所以，基本上如果你想广泛扩展它，那么只需添加

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

在.css或

内

  <td width="75%">

不确定这是否是您要找的。

使HTML类似于Zurbs响应表

3 个答案: