Table rows integrate

Question

I'm using JotForm and I have to style some table with only CSS. My problem is how can i integrate two rows, first row is header and second row is input section. But I can't explain what my problem is. Just see the code and try to solve my problem please.

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

I want it to be like

Is there way to solve this with only css?

score 0 · Answer 1 · answered May 08 '18 at 06:48

try this on you need to change html format why you want use table for this.that`s not good way

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

score 0 · Answer 2 · answered May 08 '18 at 06:59

you can like this.I hope it will help you:

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

yeah I can do that this way but only using css – May 08 '18 at 07:22 — , May 08 '18 at 07:22

score 0 · Answer 3 · answered Aug 19 '18 at 16:04

0

Just use inline-block.

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

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

answered Aug 19 '18 at 16:04

You Kpop

1
1

Table rows integrate

3 Answers3