标签: html-table

在一个HTML表中,cellpadding并cellspacing可以设置是这样的:

<table cellspacing="1" cellpadding="1">

如何使用CSS完成同样的工作？

jQuery中最后一行向表中添加额外行的最佳方法是什么？

这可以接受吗？

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

您可以添加到这样的表(例如输入,选择,行数)的限制是什么？

我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.

该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.

我有标题div和内容div.目前我正在使用表格进行布局,如下所示:

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度都已填满,无需滚动.

对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.

有没有办法在不使用的情况下达到相同的效果table？

更新:

内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.

更新2:

例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.

我们可以<tbody>同时拥有多个标签<table>吗？如果是,那么在什么情况下我们应该使用多个<tbody>标签？

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppress和text-wrap:normal,但也有帮助.

简单方案:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

我需要设置一个固定的宽度<td>.我试过了:

tr.something {
  td {
    width: 90px;
  }
}

也

td.something {
  width: 90px;
}

对于

<td class="something">B</td>

乃至

<td style="width: 90px;">B</td>

但宽度<td>仍然相同.

我正在使用具有交替行颜色的表格.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

这里我使用的是类tr,但我只想用于table.当我使用表格比这个适用于tr替代.

我可以使用CSS编写这样的HTML吗？

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

如何使用CSS使行具有"斑马条纹"？

我有两个div并排.我希望它们的高度相同,并且如果其中一个调整大小,则保持不变.虽然我无法想象这一点.想法？

为了澄清我令人困惑的问题,我希望两个盒子总是大小相同,所以如果因为文本被放入其中而增长,那么另一个应该增长以匹配高度.

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

我正在使用Bootstrap,以下不起作用:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

如何指定td标记应跨越所有列(当表格中的列的确切数量可变/难以确定何时呈现HTML)？w3schools提到你可以使用colspan="0",但它没有说明究竟是什么浏览器支持这个值(IE 6在我们的列表中支持).

看起来设置colspan为大于您可能具有的理论列数的值将起作用,但如果您table-layout设置为,它将不起作用fixed.使用大量自动布局有什么缺点colspan吗？有没有更正确的方法呢？