标签: css-tables

我正在尝试将 div 放在表格单元格中。div 比表格单元格大，我希望表格单元格不调整大小，但保持与 div 漂浮在表格上相同的大小。我如何操作 CSS 和元素来做到这一点？

你知道纯 CSS 模板的来源吗？设置一个简单的 Web 项目后，我总是希望有一个 CSS 文件来：

• 为段落和标题设置合理的字体设置
• 擦亮我的锚标签
• 为我的表单设置样式（如果我必须触摸这个表单的 HTML - 没问题）
• 使用偶数和奇数设置表格样式（我使用页眉和页脚等）
• 也许给我一些方便的错误框类等。

因此，如果我在 Google 上搜索这样的 CSS 文件，我会发现带有 HTML 结构和大量 CSS 的 CSS 主页模板，如果不进行太多更改，我就无法使用它们。我找到了完美表格的 CSS 示例，以及完美表格的其他示例，但我没有找到单个 CSS 文件，当加载到格式正确的 HTML 网站时，它会使其看起来“正常”，而不是纯 HTML 外观。

你明白我的意思吗？有人给我提示吗？

我有一张桌子，里面有酒吧。我使用display: table-cell以对齐底部的内容。问题是容器divs 不再在其对应的THs 上水平对齐（它们的宽度未设置）

这是一个显示问题的jsFiddle

我有一个display: table-cell包含子div 的div使用...都使用基于百分比的维度.当该子div包含超过一定数量的文本(取决于字体大小)时,它将忽略其高度规则.

这是一个孤立的测试用例

单击"切换文本"按钮将演示此问题.它在Chrome和Safari中更为明显,但Firefox也出现了这个问题.

我希望.childdiv的高度为40px ......但它大约是290px(在Chrome和Safari中).同样,.table应该有240px的高度.

HTML:

<div class="main">
    <div class="item">
        <div class="table">
            <div class="table-cell">
                <div class="child">
                    <div class="child-inner">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: relative; …

我正在尝试为以下布局创建CSS.这与表非常相似,但我使用它来呈现不包含表格数据的XML.

我想要两个或更多列以及一个或多个贯穿这些列的水平规则(不可见线).规则之间的垂直空间确定与表的行高完全相同,取决​​于该行单元格中内容的最大高度.

此"表"中的所有"单元格"包含两个可选块.上部块在上部规则下方对齐.下部块在下部规则上方对齐.这是一个例子:

上面和下面的块都是可选的,因此每个"单元"将具有以下配置之一.块没有固定的高度; 它们可能包含根据"单元格"的宽度包装的文本.

因为这非常像一张桌子,所以我试着用它来渲染它display:table.第一个问题:如何在单个内部创建上部和下部块table-cell？这是我的第一次尝试.

我认为这相当于在其容器底部"浮动"一个块的问题.这个问题的公认答案表明这可能是不可能的.

XML片段

这是我正在尝试渲染的XML的简化示例.

<block>
    <horizontal-rule>
        <column>
            <above-rule>When in the Course of human events</above-rule>
        </column>
        <column>
            <above-rule>to dissolve the political bands</above-rule>
            <below-rule>it becomes necessary for one people</below-rule>
        </column>
        <column>
            <below-rule>which have connected them with another</below-rule>
        </column>
    </horizontal-rule>
</block>

在试图让它工作时,我一直在尝试修改我原来的XML模式.在第二个XML示例中,我不是按相邻的水平规则进行分组,而是按行尝试更像"表"的分组.在翻译中,<above-rule>变得<cell-bottom>和<below-rule>变<cell-top>.我更喜欢原来的,但我在这个方面取得了更多进展.

<block>
    <row>
        <cell>
            <cell-bottom>When in the Course of human events</cell-bottom>
        </cell>
        <cell>
            <cell-top>it becomes necessary for one people</cell-top>
            <cell-bottom>to dissolve …

我在表中使用表。我希望子表填充父表单元格。这可能吗？

此外，表列是否有可能在不缩小其他列的情况下填充剩余空间（不像width='90%'这可能会迫使其他一些列被截断）？

经过一些研究，我发现我必须设置表的 tbody

display: block;
overflow: auto;

启用在 html 表上滚动。

是否有可能在每个现代浏览器（Chrome、Safari、Firefox）上隐藏通用滚动条？我尝试了一些像这样的解决方案，但它在桌子上不起作用。

我有一个<table>包含很多列的HTML ，因此当我的网页显示在移动浏览器上时，它太小了。因此，我正在创建媒体查询，并且想删除一些列（这并不重要）。

那么如何仅使用CSS删除html列呢？

例如，如何在下一个示例中删除表格中间的“ B”列：

table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

<table>
<th>A</th>
<th>B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

我知道，SO 上也有类似的问题，但答案似乎对我不起作用。我的表格有一个填充多行的单元格，我希望 textarea 填充整个单元格。我发现的代码不适用于高度。

CSS

textarea {
    width: 100%;
    height: 100%;
    resize: none;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
    -moz-box-sizing: border-box; /* FF1+ */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

小提琴：https : //jsfiddle.net/4nkwhLj5/

我有一个像下面这样的 3 行表。如何通过 CSS 更改行的顺序？例子：

1. 名称：ABC
2. 年龄：1 2 3
3. 国家：美国 CA CN

我希望它变成：

1. 国家：美国 CA CN
2. 名称：ABC
3. 年龄：1 2 3

<table class="details">
  <tbody>
    <tr class="name">
        <td class="label"><label for="name">Fullname</label></td>
        <td class="value name-wrapper">name</td>
    </tr>
    <tr class="Age">
        <td class="label"><label for="age">Age</label></td>
        <td class="value age-wrapper">26</td></tr>
        
    <tr class="Country">
        <td class="label"><label for="country">Country</label></td>
        <td class="value country-wrapper">US</td></tr>
  </tbody>
</table>