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

Html – How to create half height borders either within or between table cells

I need a half-height border between table cells or some half-cell-height vertical lines within a cell – the result should look as follows:

enter image description here

I have tried using line-height on the td element as in this example, but this does not work when specifying height either on the tr element or the td element.

I have also tried using repeating-linear-gradient as shown here, but I cannot make the vertical lines "half-height".

How can I solve this?

Tags:

3

Answers


  1. 0

    You can create a new table within the main table cell and apply styles to it’s table cell to make it look like that half height border.

    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 100px;">
  <tr>
    <td>
      <!-- main table -->
      <table align="center" cellpadding="0" cellspacing="0" width="600" height="200" style="border-collapse: collapse; border: 1px solid black;">
        <tr>
          <td width="100">
              main table cell
          </td>

          <td valign="bottom" style="vertical-align: bottom;">
            <!-- nested table -->
            <table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="tomato" width="1" height="100"></td>                   
              </tr>
            </table>
          </td>
        </tr>

      </table>
    </td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Use a pseudo-element instead of an actual border.

    table {
  border-collapse: collapse;
}

td {
  padding: 2em;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  position: relative;
}

td:not(td:last-child)::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: green;
  right: 0;
  top: 50%;
}

td:first-child {
  border-left: 1px solid green;
}

td:last-child {
  border-right: 1px solid green;
}
    <table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
    Login or Signup to reply.
  3. 0

    You can position and size and repeat/no-repeat the linear-gradient image:

    .grid {
  background-image: linear-gradient(to right, blue 0 1px, transparent 1px 100%);
  background-size: 20% 50%;
  background-position: 0 bottom;
  height: 50%;
  background-repeat: repeat no-repeat;
}

td {
  width: 10em;
  border: solid 1px blue;
}

tr {
  height: 2em;
}
    <table>
  <tr>
    <td class="grid"></td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search