无法更改表数据元素的宽度

时间:2015-08-05 00:51:21

标签: html css html-table

我发布了相关元素的屏幕截图。您应该能够看到,我正在应用特定于元素的样式删除所有边距,填充并将宽度设置为0px。无论我做什么,这个表数据元素都异常大。我想大幅减少它的宽度,但它不会听我的。我觉得这是一些模糊不清的HTML算法,我对此一无所知,但不能说。有什么想法吗?

enter image description here

更新:答案是HTML将确保表数据元素占用表的整个宽度,无论您是否尝试缩小单个元素(因此实质上,它是一些奇怪的HTML算法或功能)。也就是说,我会接受下面的答案,因为它是如此彻底,它应该涵盖人们可能遇到的其他可能的问题。

1 个答案:

答案 0 :(得分:2)

如何定义表格单元格(<td>)的宽度(official documentation is unclear and allows some behavior to be defined by the browser)。但是这里有一些在各种浏览器中都很稳定的特性。

管理HTML表格单元格的宽度&lt; td&gt;

  1. 单细胞表
    在由单个单元格组成的表格中 - 换句话说,一个包含一列和一行的表格 - 其中宽度尚未在<table>元素中明确定义,宽度可以由{直接控制{1}}元素。

    这不起作用(<td>规则将被忽略):

    td

    table { width: 100%;} td {width: 300px;} 失败,因为width: 300px元素具有已定义的宽度。

    然而,这将有效:

    <table>

    DEMO

    1. 包含多个单元格的表格列
      要在具有多个单元格的列中设置表格单元格的宽度,必须调整整个列。分配给各个/* table { width: 100%;} */ td {width: 300px;} 的任何宽度都将被忽略。只需调整表格的宽度即可调整列中<td>的宽度。

      DEMO

      1. 包含多列和多行的表
        要设置包含多个列和行的表格的宽度,Table Column Element<td>)是理想的,因为它针对的是各个列。

        DEMO

      2. 问题中描述的问题涉及一个不接受较短宽度分配的表格单元格。这里的第一个实现是默认情况下表格单元格扩展为填充分配的列宽(learn more about <td> default width)的100%。上面描述了减小该单元宽度的方法。

        但是,我怀疑在某些情况下,想要减小表格单元格宽度的人实际上是在尝试减小单元格内容的宽度(如图像或表单输入)。在这些情况下,可能不需要调整表格。所需要的只是调整内容本身或其容器的宽度(<col>divspan等。)

        在此图像中,表格单元格的宽度为100%,但输入字段的宽度会有所不同。

        enter image description here

        DEMO

        列跨度

        如果实际上需要减少多个单元格列中单个单元格的宽度,那么您可能需要考虑colspan属性。使用figure,我可以合并列,使单元格更宽。未指定colspan的单元格将更短,并且在隐藏相邻单元格时显示更短。

        在此图片中,colspan已应用于此2列表的右下方单元格。

        enter image description here

        DEMO

        因此,如果您的表格单元格不会让步,请考虑调整display: none元素的宽度(如果它是单个列表),分配并调整<table>元素(如果它是一个多列表格,请直接调整内容的宽度(如果这是您想要调整的唯一元素),或使用<col>

        对不起,我不能更具体地说明你的确切解决方案。没有提供任何代码供审核。但希望其中一种方法可以帮助你。