CSS - 创建具有固定大小和自定义列大小的表格答案

【问题标题】：CSS - create table with fixed size and custom column sizesCSS - 创建具有固定大小和自定义列大小的表格
【发布时间】：2015-11-09 23:06:43
【问题描述】：

我已经创建了这些 CSS 类：

        .table-c {
            border: 1px solid black;
            width:100%;
            height: 30px;
            table-layout: fixed;
        }
        .table-c td {
            border: 1px solid black;
            padding: 10px;
        }

还有这张桌子：

                   <table class="table-c">
                        <tr>
                            <td>REFERENCE NO.</td>
                            <td>DESCRIPTION</td>
                            <td>Invoice DATE</td>
                            <td>INVOICE AMOUNT</td>
                            <td>DISCOUNT TAKEN</td>
                            <td>AMOUNT PAID</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>CHECK DATA</td>
                            <td>CHECK NO.</td>
                            <td>PAYEE</td>
                            <td>DISCOUNT TAKEN</td>
                            <td>CHECK AMOUNT</td>                                
                        </tr> 
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>                           
                    </table>

表格是我想要的固定大小，但我还需要不同的列有不同的宽度。这些列不应该改变并且总是固定的。并且行高也应该是固定的。

如本例所示：

这是我的尝试： http://jsfiddle.net/cbafseq6/

如您所见，所有列的宽度相同，所有行的高度相同。例如，如果我尝试在特定的 tr 元素（如 style="height: 20px"）上设置高度，所有行的高度仍然相同。

【问题讨论】：

Andrius 你能不使用 Bootstrap 吗？可能的帮助在这里stackoverflow.com/questions/4457506/… 和stackoverflow.com/questions/15115052/…
您遇到的“问题”是由表的工作方式引起的。对于不同的列宽，您将需要单独的表格。一行中的所有单元格将始终自动具有与内容最高的单元格相同的高度。此外，您无法控制或限制表格单元格的高度 - 它始终由其内容定义（至少是最小高度）。此外，您无法控制表格单元格上的overflow，无论是 x 还是 y。
@connexo，如果你想控制溢出，你可以。无论如何，您可以将display 属性更改为任何非表值并使用表，因为它不是表。

标签： html css html-table

【解决方案1】：

如果您希望每一行都有特定的高度，每一列都有特定的宽度，您可以执行以下代码。我用了你自己的代码。你可以告诉我这是否有帮助。

.table-c {
            border: 1px solid black;
            width:100%;
            height: 30px;
            table-layout: fixed;
        }
        .table-c td {
            border: 1px solid black;
            padding: 10px;
        }

<table class="table-c">
  <tr>
    <td style="width: 10%">REFERENCE NO.</td>
    <td style="width: 30%">DESCRIPTION</td>
    <td style="width: 10%">Invoice DATE</td>
    <td style="width: 10%">INVOICE AMOUNT</td>
    <td style="width: 20%">DISCOUNT TAKEN</td>
    <td style="width: 20%">AMOUNT PAID</td>
  </tr>
  <tr style="height: 200px">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<table class="table-c">
  <tr>
    <td style="width: 20%">CHECK DATA</td>
    <td style="width: 10%">CHECK NO.</td>
    <td style="width: 40%">PAYEE</td>
    <td style="width: 10%">DISCOUNT TAKEN</td>
    <td style="width: 20%">CHECK AMOUNT</td>                                
  </tr> 
  <tr style="height: 200px">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>                           
</table>

【讨论】：

抱歉，在保存时我丢失了一些代码：P 我更新了我的答案！
和我的一样，但是表格之间有额外的分隔线。

【解决方案2】：

不确定table 元素是您想要使用的元素。

也许可以通过使用多个表格（每行一个表格）来自定义列内单元格的宽度，但单个表格不能让每行的列宽都改变。

也许试试div 布局。

关于tr 上设置的高度 - 您选择的高度太小，所以没有效果，较大的值会使行变大。同样，由于table 的显示设置，它的工作方式有所不同，您可能应该寻找不同的布局选项。

【讨论】：

【解决方案3】：

只需使用 2 个表：

table {
  border: solid black;
  border-width: 0 1px;
  width: 100%;
  height: 30px;
  table-layout: fixed;
  border-spacing: 2px;
  margin-top: -2px; /* same value as border-spacing */
}

td {
  border: 1px solid black;
  padding: 10px;
} 

table:first-child {
  border-top-width: 1px;
  margin-top: 0;
}

table:last-child {
  border-bottom-width: 1px;
}

<div>
  <table>
    <tr>
      <td>REFERENCE NO.</td>
      <td>DESCRIPTION</td>
      <td>Invoice DATE</td>
      <td>INVOICE AMOUNT</td>
      <td>DISCOUNT TAKEN</td>
      <td>AMOUNT PAID</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <td>CHECK DATA</td>
      <td>CHECK NO.</td>
      <td>PAYEE</td>
      <td>DISCOUNT TAKEN</td>
      <td>CHECK AMOUNT</td>                                
    </tr> 
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>                           
  </table>
</div>

【讨论】：

border-collapse: collapse; 使其更类似于他的原始示例。
谢谢，但我想我需要 4 张桌子？因为我需要为每一行自定义高度。
@AlexanderDixon，我预计他想要间距。是的，可以添加border-collapse: collapse; 和删除border-spacing: 2px; margin-top: -2px;。
@Andrius，高度如何取决于桌子的数量？
将tr 设置为特定高度不起作用。所以我想知道如何为不同的行指定不同的高度？

【解决方案4】：

老实说，即使表格是用来显示表格数据的，我也会在这里使用 div 布局。

您可以使用包装器和一些浮动 div 轻松完成此操作，然后您可以对任何“单元格”进行任何和所有您喜欢的自定义。只是我的 .02

【讨论】：