How to have margin between table elements?-CodePudding

How can I have the margin between two td elements?

table {
  border: none;
}

table tr {
  height: 40px;
}

table tr td:nth-child(2) {
  margin-left: 30px;
  width: 400px;
}

table tr td {
  border-top: 1px solid #000;
  color: #000;
}

<table>
  <tr>
    <td>Gebäudetyp</td>
    <td>Mall</td>
  </tr>
  <tr>
    <td>Anzahl von Leuchten</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Wattage alt</td>
    <td>70 W</td>
  </tr>
  <tr>
    <td>Betriebsstunden</td>
    <td>6.500</td>
  </tr>
  <tr>
    <td>Stromverbrauch/Jahr</td>
    <td>290.000 KWh</td>
  </tr>
  <tr>
    <td>Strompreis</td>
    <td>55 Cent/KWh</td>
  </tr>
  <tr>
    <td>Investition</td>
    <td>155.203 Euro</td>
  </tr>
</table>

if I add padding-left: 30px to the second element of td it gives padding, but I want to have gap between elements.

Desired output should be:

CodePudding user response：

You can use this CSS rule to move all second cells to the right by 30px, creating empty space between the cells that way:

td:nth-child(2) {
  position: relative;
  left: 30px;
}

table {
  border: none;
}

table tr {
  height: 40px;
}

table tr td:nth-child(2) {
  width: 400px;
}

table tr td {
  border-top: 1px solid #000;
  color: #000;
}
td:nth-child(2) {
  position: relative;
  left: 30px;
}

<table>
  <tr>
    <td>Gebäudetyp</td>
    <td>Mall</td>
  </tr>
  <tr>
    <td>Anzahl von Leuchten</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Wattage alt</td>
    <td>70 W</td>
  </tr>
  <tr>
    <td>Betriebsstunden</td>
    <td>6.500</td>
  </tr>
  <tr>
    <td>Stromverbrauch/Jahr</td>
    <td>290.000 KWh</td>
  </tr>
  <tr>
    <td>Strompreis</td>
    <td>55 Cent/KWh</td>
  </tr>
  <tr>
    <td>Investition</td>
    <td>155.203 Euro</td>
  </tr>
</table>

CodePudding user response：

To change the space between table cells, use border-spacing property on the table element, you can use single value for border-spacing propety and it apply to table columns and rows. ex:

table {
  border-spacing: 30px;
}

read more about this here

if you add two values for the border-spacing propety, you can have spacing separately for table column and row.

   table {
         border-spacing:Xvalue yValue;
        }

Xvalue is used for changing table space for columns and yValue is used for changing space between rows.

CodePudding user response：

If you are not required to use table, you can do it with div and flex

.content {
  display: flex;
}

.content .left .element,
.content .right .element {
  border-top: 1px solid #000000;
}

.content .left .element:last-child,
.content .right .element:last-child {
  border-bottom: 1px solid #000;
}
.content .left {
  margin-right: 15px;
}

.content .right {
  width: 400px;
}

.content .left p,
.content .right p {
  font-size: 19px;
}

<div >
            <div >
              <div >
                <p>Gebäudetyp</p>
              </div>
              <div >
                <p>Anzahl von Leuchten</p>
              </div>
              <div >
                <p>Wattage alt</p>
              </div>
              <div >
                <p>Betriebsstunden</p>
              </div>
              <div >
                <p>Stromverbrauch/Jahr</p>
              </div>
              <div >
                <p>Strompreis</p>
              </div>
              <div >
                <p>Investition</p>
              </div>
            </div>
            <div >
              <div >
                <p>Mall</p>
              </div>
              <div >
                <p>450</p>
              </div>
              <div >
                <p>70 W</p>
              </div>
              <div >
                <p>6.500</p>
              </div>
              <div >
                <p>290.000 KWh</p>
              </div>
              <div >
                <p>55 Cent/KWh</p>
              </div>
              <div >
                <p>155.203 Euro</p>
              </div>
            </div>
          </div>

CodePudding user response：

use border-spacing on table for spacing and negative margin to get rid of extra space.

table {
    border-spacing: 15px 0;
    margin: 0 -15px;
    overflow: hidden;
}

https://jsfiddle.net/874k5a1c/