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

Html – How can I round the borders of this table?

I used a html code generator in order to create this table just for ease, I want to give it rounded borders but am clueless as to how

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}
<table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>

Could anyone give me some help, complete noob here sorry

I’ve tried adding CSS solutions i’ve found online but because of the way the table is generated none of it works, I know I should just build the table from scratch but at the time this was so much quicker and it is used multiple times across a site, only now am I deciding to add borders and it would be easier to add it to tables where it is needed rather than replacing them completely

Tags:

2

Answers


  1. 0

    Cleared up the styles a little, but here is the code.

    table {
        border-collapse: separate;
        border: solid #93d22c 3px;
        border-radius: 6px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    }

    td {
        font-family: Arial, sans-serif;
        padding: 11px
    }

    td,
    th {
        border-left: solid #93d22c 3px;
        border-top: solid #93d22c 3px;
    }

    th {
        border-top: none;
    }

    td:first-child,
    th:first-child {
        border-left: none;
    }

    .tg-5091 {
        text-align: center;
    }
    <table style="width: 100%">
    <thead>
        <tr>
            <th style="text-align: center; width: 165px" class="tg-5091"></th>
            <th class="tg-5091" style="width: 108px">
                <strong>Price per unit</strong>
            </th>
            <th class="tg-5091" style="width: 99px"><strong>Delivery Fee</strong></th>
            <th class="tg-5091" style="width: 120.288px">
                <strong>Delivery Time</strong>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width: 165px">X</td>
            <td class="tg-5091" style="width: 108px">X</td>
            <td class="tg-5091" style="width: 99px">X</td>
            <td class="tg-5091" style="width: 120.288px">X</td>
        </tr>
        <tr>
            <td style="width: 165px">X</td>
            <td class="tg-5091" style="width: 108px">1</td>
            <td class="tg-5091" style="width: 99px">1</td>
            <td class="tg-5091" style="width: 120.288px">1</td>
        </tr>
        <tr>
            <td style="width: 165px">X</td>
            <td class="tg-5091" style="width: 108px">1</td>
            <td class="tg-5091" style="width: 99px">1</td>
            <td class="tg-5091" style="width: 120.288px">1</td>
        </tr>
        <tr>
            <td style="width: 165px">X</td>
            <td class="tg-5091" style="width: 108px">1</td>
            <td class="tg-5091" style="width: 99px">1</td>
            <td class="tg-5091" style="width: 120.288px">1</td>
        </tr>
    </tbody>
</table>

    I used Rounded table corners CSS only for reference.

    Login or Signup to reply.
  2. 0

    On table:

    border-radius: 1em;
overflow: hidden;
outline: 3px solid #93d22c;
outline-offset: -3px;

    Full code (unchanged except .tg):

    .tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 1em;
  overflow: hidden;
  outline: 3px solid #93d22c;
  outline-offset: -3px;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}
    <table class="tg" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align: center; width: 165px;" class="tg-5091"></th>
      <th class="tg-5091" style="width: 108px;"><strong>Price per unit</strong></th>
      <th class="tg-5091" style="width: 99px;"><strong>Delivery Fee</strong></th>
      <th class="tg-5091" style="width: 120.288px;"><strong>Delivery Time</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">X</td>
      <td class="tg-5091" style="width: 99px;">X</td>
      <td class="tg-5091" style="width: 120.288px;">X</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
    <tr>
      <td class="tg-2kj1" style="width: 165px;">X</td>
      <td class="tg-5091" style="width: 108px;">1</td>
      <td class="tg-5091" style="width: 99px;">1</td>
      <td class="tg-5091" style="width: 120.288px;">1</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search