表行集成

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

只需使用inline-block。

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

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