使 HTML <td>类似于 Zurbs 响应式表

Make HTML <td> similar to Zurbs responsive tables

本文关键字：响应 Zurbs 类似于 td HTML      更新时间：2023-09-26

所以，我想要一个具有固定高度<tr>'s的表，并且有很长的<td>'s被"继续"类似于 Zurb 响应式表格，但对于普通的 Web 浏览器（不在手机上）。

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

我不确定你想做什么，但看看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> s 的示例，请添加width: 30%到样式以进行<td>。

看看这个小提琴链接，这将帮助您获得像 Zurb 响应式表格这样的表格。 我只是只在 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");

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

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

  Width:75%;

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

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

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

在.css或内部

  <td width="75%">

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

相关文章：