Question

我开始学习HTML。在我创建的表中，我使用rowspan，但是当我在展开的列中插入图像时，该图像似乎无法在整个单元格中展开。因此，表格的行开始具有不同的高度。如下图所示，这在EDGE和IE中发生，但在OPERA，Firefox等中则没有。柱高在那里也不一致。理想情况下，我希望其内容所标识的单元格具有以下高度（假设行高度固定）：

标题1和2：1列

标题3和4：2列

左图高度：4列

右图高度：6列

body{
    background-color:#FFFF99
}
img {
    height: 70px;
    display:block;
}
h1{
    font-style: italic;
    color:#3300CC;

}
table, th, td {
    border: 1px solid black;
    border-spacing:3px;
}
table {
  width: 75%;
}

th {
    padding:4px;
    text-align:right;
}
td{
    padding:4px;
}

.Tablestyle1{
  background-color: #00CC66;
  text-align: center
}

<h1>TITLE </h1>
    <table>
    <tr class="Tablestyle1" >                                       <!--First Row-->
        <td>A</td>
        <td colspan="4">B</td>
    </tr>
    <tr>
        <td class="Tablestyle1"rowspan="2">C</td>
        <th>Header1</th>
        <td> D</td>
        <td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" > 
        <td rowspan="6">
            <ol type="I">
                <li>List1</li>
                <li>List2</li>
                <li>List3</li>
            </ol>
    </tr>
    <tr>
        <th>Header2</th>
        <td>F</td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
        </td>
        <th rowspan="2">Header3</th>
        <td rowspan="2">H</td>
    </tr>
    <tr></tr>
    <tr>
        <th rowspan="2">Header4</th>
        <td rowspan="2">L</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="5">
            <a href="*"> Link1</a>
        </td>
    </tr>   
    </table>

Answer 1

对于高度，您可以将所有td的高度设置为

另一个选项（也用于宽度），您可以为所需的每个单元格设置类，并为其定义css规则。

您可以在此处查看示例。

https://jsfiddle.net/5upeywrd/2/

我为标题单元格“ A”做了规则。

祝你好运

Answer 2

这是一个带有内联css的精简示例，以说明如何设置每个元素的样式。 colspans和rowpans也得到了简化。

这是固定高度的解决方案。如果要根据内容调整高度，则可能需要一些jQuery魔术。我认为Flexbox和表格无法在跨浏览器中正常工作。

$medicines = Inventory::with([
  'medicine' => function($query) {
       $query->where('category', "Syringe");
  }    
])->get();

如果内容太大，则表格仍可能会失真–除非您使用overflow：hidden https://stackoverflow.com/a/509825/762640

如何使表在所有浏览器中保持一致

2 个答案: