Html Question posted in
Some basic documentation can be found here.

Html – How can I make a border around a row with three columns and a line between each column?

I am trying to insert a table in a page with the same color and want to be able to distinguish the table from the main page. I want a white border around my three columns. Here is my code:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: reflexive;
  background-color: #1476D9;
  color: #ffffff
}

h2.solid {
  border-style: solid;
  border-radius: 15px;
  border-width: 10px;
  border-color: grey
}

.custom-border {
  border-color: grey;
  border-width: 20px;
  border-style: solid;
  border-radius: 15px;
  background-color: #ffffff;
}
<div class="row">
  <div class="column" style="background-color:#1476D9;">
    <h2>title</h2>
    <p>text</p>
  </div>
  <div class="column" style="background-color:#1476D9;" style="color: #fffff" style="border: grey">
    <h2>title</h2>
    <p>text</p>
  </div>
  <div class="column" style="background-color:#1476D9;">
    <h2>title</h2>
    <p>text</p>
  </div>
</div>

Thanks!

So far I have tried p.solid {border-style: solid; border-radius: 15px; border-width: 10px; border-color: white} but I am unsure if I put the code in the right place.

Tags:

2

Answers


  1. 0

    I understand you want a border around the whole table?
    So my one remark would be that you don’t need to write out every property separately- you can put them together e.g.

    .custom-border {
border: 3px solid black;
}

    So basically the width of the border, the style and the colour.

    I also think rather than a border, why not change the background colour of the table itself, and apply a slight border-radius to obtain a rounded corner effect

    table {
background-color: aqua;
border-radius: 8px; 
}

    You also seem to be applying inline css styles as well, which are not necessary. And the html is not written in table form:

    <table>
<tbody>
<tr>
    <td> </td>
    <td> </td>
</tr>
</tbody>
</table>

    Counterintuitively, the rows (tr) are written first and the columns (td) are nested inside the rows.

    You can also put th instead of tr
    for the FIRST row to make that your table headings

    As per the other answer, you can apply border-bottom, border-top, border-left and border-right properties to any individual table cell (a row or column).

    It may be helpful to apply classes to exclude any cell you do not want to apply the style to. For example to exclude the final column, add class .last to each final td in the row and then put:

    .last {
border: none;
}

    I hope this helps- it’s not really 100% clear what you want the finished table to look like:)

    Login or Signup to reply.
  2. 0

    Recommend you use a flexbox or a grid instead of floats.

    body {
  background-color: #1476D9;
}

.row {
  border: 2px solid white;
  display: flex;
}

.column {
  padding: 10px;
  color: #ffffff;
  flex: 1 1 0; /* make columns stretchy and equal width */
}
    <div class="row">
  <div class="column">
    <h2>title</h2>
    <p>text</p>
  </div>
  <div class="column">
    <h2>title</h2>
    <p>text</p>
  </div>
  <div class="column">
    <h2>title</h2>
    <p>text</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search