Table with different size?

Asked

Viewed 1,158 times

3

Hello! I am breaking my head to try to make my table with the left column bigger than the direct column. And I’d really like someone to help me.

/* Post Table */
le#alter tr td {background: #fff;} 
table#alter tr.dif td {background: #f8f8f8;}
.post-body table {max-width:100%;}
.post-body table td {width:20%;}
.post-body table td,.post-body table caption{background-color:#fafafa;border:1px solid rgba(0,0,0,0.05);padding:10px;text-align:left;vertical-align:top;}
.post-body table th {background:#22a86d;color:#fff;border:1px solid rgba(0,0,0,0.05);padding:10px 15px;text-align:left;vertical-align:top;font-size:16px;}
.post-body table.tr-caption-container {border:none;max-width:20%;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:10px 15px;border:none;color:#666}
.post-body td a:hover{color:#d14233;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
.sr {visibility:hidden;width:0;height:0;}
<table cellpadding="0" cellspacing="0" id="alter">
    <tbody>
        <tr>
            <th>Características</th>
            <th>Disponibilidade</th>
        </tr>
        <tr class="dif"> 
            <td>Division 1</td>
            <td>Habilitado</td>
        </tr>
        <tr>
            <td>Division 2</td>
            <td>Habilitado</td>
        </tr>
        <tr class="dif"> 
            <td>Division 3</td>
            <td>Habilitado</td>
       </tr>
        <tr>
            <td>Division 4</td>
            <td>Desabilitado</td>
       </tr>
        <tr class="dif"> 
            <td>Division 5</td>
            <td>Desabilitado</td>
       </tr>
    </tbody>
</table>

My table is like this: inserir a descrição da imagem aqui

and I’d like her to stay that way: inserir a descrição da imagem aqui

1 answer

2

just remove this line:

/* .post-body table td {width:20%;} */

and give a width to the desired first row cell:

 <tr>
   <th>Características</th>
   <th style="width: 20%;">Disponibilidade</th>
 </tr>
  • I had already succeeded, but still thank you very much for responding.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.