css - 表格行集成

Question

我正在使用JotForm，我必须只用CSS. 我的问题是如何整合两行，第一行是标题，第二行是输入部分。但我无法解释我的问题是什么。请查看代码并尝试解决我的问题。

HTML：

<table>
    <tr>
        <th>Company Name</th>
        <th>Company Name</th>
        <th>Company Name</th>
        <th>Company Name</th>
        <th>Company Name</th>
    </tr>
    <tr>
        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
    </tr>
</table>

CSS：

tr {
    display: table;
    width: 800px;
}

td {
    display: inline-table; 
    width: 25%;
}

th {
    display: inline-table; 
    width: 25%;
    background-color: red;
    color: #fff;
    font-weight: 500;
}

代码结果

我希望它像

有没有办法只用css解决这个问题？

Answer 1

试试这个，你需要改变 html 格式，为什么你要使用表格。这不是好方法

<table>
<tr>
    <th>Company Name</th>
    <th>Company Name</th>
    <th>Company Name</th>
</tr>
<tr>
    <td><input type="text" name="" placeholder="Write here"></td>
    <td><input type="text" name="" placeholder="Write here"></td>
    <td><input type="text" name="" placeholder="Write here"></td>
 </tr>
  <tr>
        <th>Company Name</th>
         <th>Company Name</th>
 </tr>
 <tr>
    <td><input type="text" name="" placeholder="Write here"></td>
    <td><input type="text" name="" placeholder="Write here"></td>
</tr>

Answer 2

你可以喜欢这个。我希望它能帮助你：

<table>
    <tr>
        <th>Company Name</th>
        <th>Company Name</th>
        <th>Company Name</th>
        </tr>
        <tr>
         <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
        </tr>

        <th>Company Name</th>
        <th>Company Name</th>
    </tr>
    <tr>

        <td><input type="text" name="" placeholder="Write here"></td>
        <td><input type="text" name="" placeholder="Write here"></td>
    </tr>
</table>
<style>
tr th{
background-color: red;
color:white;
}
</style>

Answer 3

只需使用inline-block.

td {
    display: inline-table; 
    width: 25%;
}

th {
    display: inline-table; 
    width: 25%;
    background-color: red;
    color: #fff;
    font-weight: 500;
}