How to put a margin and border-bottom to a label tr?

Question

How to put a margin and border-bottom to a label tr?

Navigation

#1 by (0 votes)

0

I try to put a margin and a border-bottom at the same time on a label <tr> but it does not work for me, I managed to put the border in the following way:

border-collapse: separate;
border-spacing: 0px 20px;

But at the moment of removing that fraction of css I get the edge, obviously without the space I want. In what way can I create a margin between tr and at the same time create a border lower?

table{
    border-collapse: separate;
    border-spacing: 0px 20px;
}

table tr{
    background-color: #00ff00;
    border-bottom: 1pt solid #c10c0c;
}

<table>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
</table>

I leave an example in snippet but it does not leave the edges, it is better to try locally

html css3 css web

asked by Samir Llorente 03.12.2017 в 05:51

source

1 answer

Help with Data Source OLEDB Error executing a prepared statement

score 0 · Accepted Answer

According to CSS section 17.6 in the separate border model that is what you you are using, the rows (tr) can not have edges. If you want to be able to give edge to the tr you have to put the code in the following way.

CSS

table{
    border-collapse: collapse;
    border-spacing: 0px 20px;
}

table tr{
    background-color: #00ff00;
    border-bottom: 1pt solid #c10c0c;
}

HTML

<table>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Cualquier cosa</p>
      </td>
    </tr>
</table>

As you may have noticed there is a problem and it is that the margin does not work obviously since it is in collapse mode but it is that the collapse is necessary to be able to give edge to the tr.

To be able to have the margin you have to give edge to the td, you do not have another.

CSS

    table{
        border-collapse: separate;
        border-spacing: 0px 20px;
    }

    table td{
        background-color: #00ff00;
        border-bottom: 1pt solid #c10c0c;
    }

HTML

    <table>
        <tr>
          <td>
            <p>Cualquier cosa</p>
          </td>
        </tr>
        <tr>
          <td>
            <p>Cualquier cosa</p>
          </td>
        </tr>
        <tr>
          <td>
            <p>Cualquier cosa</p>
          </td>
        </tr>
    </table>