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元素是您想要使用的内容。

列中的单元格的自定义宽度可以通过使用多个表（每行一个）来实现，但是，单个表不能让每行的列更改宽度。

也许尝试div布局。

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

Answer 2

只需使用2个表：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

Answer 4

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

MATCH (a:MYTYPE { label:'a' })
MATCH (b:MYTYPE { label:'b' })
MATCH (c:MYTYPE { label:'c' })
MATCH (d:MYTYPE { label:'d' })
MATCH (avoid1:MYTYPE { label:'avoid1' })
MATCH (avoid2:MYTYPE { label:'avoid2' })

MATCH p=(a)-[:CF*]->(b)-[:CF*]->(c)-[:CF*]->(d)
WHERE NOT ( (a)-[:CF*]->(avoid1 {label:'avoid1'})-[:CF*]->(b) ) 

RETURN p

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

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

4 个答案: