0

所以，我希望有一个固定高度的表格，<tr>'s并且很长一段时间<td>'s都可以“继续”，类似于Zurb 响应式表格，但适用于普通的网络浏览器（不是在手机上）。

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

4

3 回答 3

1

我不确定您要做什么，但请看一下white-space:nowrapand table-layout: fixed。

你的CSS可能是这样的

table {
  table-layout: fixed;  
}    

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

例如，将 s 的固定宽度<td>添加width: 30%到<td>.

于 2013-02-04T08:22:19.630 回答
0

不确定您要做什么，但是当您的意思是更长时，您是想让它水平宽还是垂直？由于上面的2个答案没有给你

  Width:75%;

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

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

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

在 .css 或内部

  <td width="75%">

不确定这是否是您正在寻找的。

于 2013-02-04T09:54:21.283 回答
0

看看这个小提琴链接，这将帮助您获得像 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");

我希望这会对你有更多帮助。

于 2013-02-04T08:49:48.360 回答