标签: html-table

这个

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

可以这样做:

<div>
    <div style="display: table-row;">
        <div style="display: table-cell;">Hello</div>
        <div style="display: table-cell;">World</div>
    </div>
</div>

现在,这两者在性能和/或渲染速度方面是否存在差异,或者它们是否相同？

Bootstrap 3在桌子上掉落圆角.在申请.table-bordered课程时,我应该申请哪些样式才能让他们回来,好吗？

UPDATE

到目前为止,我已经来到这个代码,没有任何效果.

从Bootstrap 2.3.2中获取的CSS:

.table-bordered
{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}

.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
}

HTML代码:

<table class="table table-hover table-responsive table-bordered">
    <thead> …

我正在尝试创建一个表格,其中每一行都是一个表格.我希望每个输入都在不同的表格中,但我仍然需要它,例如,所有第一个输入都属于同一个表头,依此类推.

我要做的是一个可编辑的网格,或多或少这个:

<table>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
</table>

但显然我无法以这种方式安排标签(或者w3c验证器所说的那样).

有什么好办法吗？

经过一番研究,我找不到这个问题的答案.有这个,但它没有真正回答我的问题.我想在CSS中"删除"一个完整的HTML表行,而不仅仅是其中的文本.它可能吗？从我链接的示例来看,似乎tr样式甚至在Firefox中都不起作用.(无论如何,文字装饰仅适用于文本afaik)

我希望有一个表可以在列中伸展但我在css中的最小和最大宽度有点麻烦.

关于它是如何工作的似乎也有一些相互矛盾的答案:

• 最小/最大宽度应该工作:防止重叠表td宽度的文本
• 最小/最大宽度不受支持:表属性的最小宽度和最大高度

我想有以下内容

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

有没有办法在没有javascript的情况下实现这一点(即用表格约束拉伸列)？

• 我只需要这个就可以使用CSS3 + HTML5
• 没有扩展的东西的jsfiddle:http://jsfiddle.net/4b3RZ/10/
• 如果我只在列上设置最小宽度,我得到一个比例拉伸:http://jsfiddle.net/4b3RZ/8/

下面是一些实际为某些不同的css设置呈现的内容表:

我有一个HTML表格,我希望前几列很长.我在CSS中这样做:

td.longColumn
{ 
     width: 300px;
}

这是我的表的简化版本

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

出于某种原因,当有很多列时,该表似乎使该列<300px.我基本上希望它保持宽度,无论如何(只是增加水平滚动条).

容器,表里面,没有任何类型的最大宽度,所以我想不通为什么它挤压此列中,而不是尊重这个宽度.

无论如何都在这周围,无论如何,这个柱子会保持一定的宽度吗？
这是外容器div的CSS:

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: …

我想在整个表格周围添加边框半径.但是以下代码在最新版本的Firefox和Google Chrome中都不起作用.

HTML

<table class="bordered">
    <thead>
        <tr>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>                            
        </tr>
    </tbody>                    
</table>

CSS

table {
    border-spacing: 0;
    width: 600px;
    margin: 30px;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}        
table th:first-child {
    border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
}

table th:last-child { …

我需要在网页上显示一个大表,并且需要阻止第一列和第一行滚动. 我想动态设置此表的垂直大小(在一些静态大小的页眉/页脚内容之间)以使其尽可能高,而不强制浏览器窗口具有垂直滚动条.

   browser window\/
+--------------------------------------------------------------+  /\
|   /\     /\  /\         /\       /\      /\     /\ /\        |  fixed static
|    web page header fields and text                           |  |  size
|   \/    \/   \/         \/       \/     \/     \/   \/       |__\/__
|               +----<<<table-scrollbar>>>>>----------------+  |  /\
|+--------------+--------+--------+--------+--------+-------+  |   |
||              |        |colspan |        |        | fixed |  |   |
||  fixed       |  fixed |  fixed | fixed  |  fixed | more> |  |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |   |
||  fixed       |  |  |  |   | …

我正在使用表格排序解决方案(在JavaScript中),但我似乎找不到合适的解决方案.我只需要按字母顺序对每列进行排序.它不需要忽略任何代码或任何数字或使用货币.只需单击列标题即可从排序的z/za中切换它.

有谁知道这样一个非常简单的解决方案？

我使用的数据表在表中显示服务器端数据.

我不能定位和设计单个单元格(<TD>).我搜索了一下,发现它可能有:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
    ....
}

...但我不太确定,因为我有一些表,而不是所有表都有相同数量的列和行.我想给所有TDs"专栏" 提供共同课程.