Строки таблицы объединяются - PullRequest
Новая
       36

Строки таблицы объединяются

0 голосов
/ 08 мая 2018

Я использую 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;
}

Результат кода

result

Я хочу, чтобы это было похоже на

Picture2

Есть ли способ решить эту проблему только с помощью css?

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Вам может понравиться это. Я надеюсь, что это поможет вам: 

<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>
0 голосов
/ 19 августа 2018

Просто используйте inline-block. 

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

th {
    display: inline-table; 
    width: 25%;
    background-color: red;
    color: #fff;
    font-weight: 500;
}
0 голосов
/ 08 мая 2018

попробуйте это, вам нужно изменить формат 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>

...