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

JM
July 14, 2023
119 views
1 vote
2 Answers

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: css html

Answers

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.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers