HTML - Space between tds

Navigation
2

Is there any way to give spacing between <td> as in the figure below?

OBS: With right-only spacing of <td> .

    
asked by anonymous 07.12.2015 / 19:08

4 answers

1

I got the effect you need by putting a class in the td of the column in question and using a custom css for it: 

td { background: gray; padding:10px }
.tdEspaco { display: table; float:left; margin-right:10px }
table { border-spacing: 5px; }
<table>
  <tr>
    <td class='tdEspaco'>1</td>
    <td >2</td>
    <td >3</td>
  </tr>
    <tr>
    <td class='tdEspaco'>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <td class='tdEspaco'>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
    
07.12.2015 / 19:42
1

Yes, there is a form using border-collpse and border-spacing in CSS : 

table td {
  border: solid 1px #000;
}
table{
  border-collapse: separate; 
  border-spacing: 10px;
  margin: 0 0 0 0;
}
<table>
      <tr>
        <td>Coluna 1
        </td>
        <td>
          Coluna 2
        </td>
      </tr>
      <tr>
        <td>Coluna 1
        </td>
        <td>
          Coluna 2
        </td>
      </tr>
    </table>
    
07.12.2015 / 19:38
1

You can use the css border-spacing property in your table . 

table {
  border-spacing: 15px 10px;
}
table>tbody>tr>td {
  background: blue;
  padding: 5px 20px;
}
<table>
  <tr>
    <td>Coluna 1
    </td>
    <td>
      Coluna 2
    </td>
  </tr>
  <tr>
    <td>Coluna 1
    </td>
    <td>
      Coluna 2
    </td>
  </tr>
</table>
    
07.12.2015 / 19:10
-4

I got simpler impossible 

border-right: solid 10px #fff;
border-bottom: solid 3px #fff;
    
07.12.2015 / 19:23
Script to shut down the computer when closing a certain program Create service versions rest