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

Question

我已经创建了这些 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")，所有行仍将具有相同的高度。

Answer 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>