CODEWITHSUNDEEP
csshtml-table
Bojjaiah
Bojjaiah

Reputation: 261

Rounded corners for html table

I am trying to write css for html table rounded corners, but my style is applying thread also. for this I have tried below way.

.tier_price_break {
  width: 225px;
}


/* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/

.tier_price_break,
td {
  border: 1px solid #cde2f5;
  /*#ddd;*/
  border-radius: 8px;
}

.tier_price_break,
th {
  border: 1px solid #cde2f5;
  /*#ddd;*/
  border-radius: 8px;
}

.tier_price_break {
  border-collapse: separate;
  float: right;
  border-spacing: 0;
}

.tier_price_break>td {
  height: 15px;
}

.tier_price_break>tbody>tr>td {
  padding: 0px 0px !important;
  border: none;
}

.tier_price_break>thead>tr>th {
  padding: 0px 0px !important;
}

@media only screen and (max-width: 768px) {
  .tier_price_break {
    border-collapse: collapse;
    float: none !important;
  }
  .tier_price_break {
    width: 180px !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .tier_price_break {
    width: 180px !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .tier_price_break {
    width: 180px !important;
  }
}

.tier_price_break>tbody {
  border-collapse: collapse;
  border-collapse: separate;
  border-spacing: 4px;
}

.tier_price_break tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.tier_price_break tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

.tier_price_break thead th:first-child {
  border-radius: 10px 0 0 0;
}

.tier_price_break thead th:last-child {
  border-radius: 0 10px 0 0;
}
<table class="tier_price_break" cellpadding="0" cellspacing="0" border="1">
  <thead>
    <tr>
      <th colspan="2">
        <div style="text-align: center;">
          Quantity Discounts
        </div>
      </th>
    </tr>
    <tr>
      <th style="width: 50%;">
        <div style="text-align: center;">
          Qty.
        </div>
      </th>
      <th style="width: 50%;">
        <div style="text-align: center;">
          Pack Price
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div style="text-align: center;">
          50
        </div>
      </td>
      <td>
        <div style="text-align: center;">
          $0.28
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="text-align: center;">
          500
        </div>
      </td>
      <td>
        <div style="text-align: center;">
          $0.21
        </div>
      </td>
    </tr>
  </tbody>
</table>

result

enter image description here

I want only rounded corners for html table not for thead.

How to do this? Any help/suggestions?

I am trying to write css like below table. enter image description here

Upvotes: 0

Views: 8750

Answers (6)

Venkatachalam
Venkatachalam

Reputation: 154

.tier_price_break{
    border: 1px solid #ccc;
    border-radius: 8px;
}
.tier_price_break tr:first-child th{
  border-bottom: 1px solid #ccc;
}
 <table class="tier_price_break" width="100%" cellpadding="5" cellspacing="0" border="0">
    <thead>
        <tr>
            <th colspan="2">
                <div style="text-align: center;">
                    Quantity Discounts
                </div>
            </th>
        </tr>
        <tr>
            <th style="width: 50%;">
                <div style="text-align: center;">
                    Qty.
                </div>
            </th>
            <th style="width: 50%;">
                <div style="text-align: center;">
                    Pack Price
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="text-align: center;">
                    50
                </div>
            </td>
            <td>
                <div style="text-align: center;">
                    $0.28
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="text-align: center;">
                    500
                </div>
            </td>
            <td>
                <div style="text-align: center;">
                    $0.21
                </div>
            </td>
        </tr>
    </tbody>
</table>
 Run code snippet

Upvotes: 1

aavrug
aavrug

Reputation: 1889

Try this, just removed few border styling and added for entire table and for first tr > th.

.tier_price_break{
    width: 225px;
}

/* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/

.tier_price_break {
    border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break th {
    border: none;
}

.tier_price_break tr:first-child th {
    border-bottom: 1px solid #cde2f5;
}

.tier_price_break {
    border-collapse: separate;
    float: right;
    border-spacing: 0;
}

.tier_price_break > td {
    height: 15px;
}

.tier_price_break > tbody > tr > td {
    padding: 0px 0px !important;
    border: none;
}

.tier_price_break > thead > tr > th{
    padding: 0px 0px !important;
}

@media only screen and (max-width: 768px){
    .tier_price_break {
        /*border-collapse: collapse;*/
        float: none !important;
    }
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

.tier_price_break > tbody {
    /*border-collapse: collapse;*/
    border-collapse: separate;
    border-spacing: 4px;
}
   <table class="tier_price_break" cellpadding="0" cellspacing="0" border="1">
    <thead>
        <tr>
            <th colspan="2">
                <div style="text-align: center;">
                    Quantity Discounts
                </div>
            </th>
        </tr>
        <tr>
            <th style="width: 50%;">
                <div style="text-align: center;">
                    Qty.
                </div>
            </th>
            <th style="width: 50%;">
                <div style="text-align: center;">
                    Pack Price
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="text-align: center;">
                    50
                </div>
            </td>
            <td>
                <div style="text-align: center;">
                    $0.28
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="text-align: center;">
                    500
                </div>
            </td>
            <td>
                <div style="text-align: center;">
                    $0.21
                </div>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 0

aasim bairagdar
aasim bairagdar

Reputation: 301

You need to rewrite CSS code.

.tier_price_break{
  border-radius:8px;
  border:1px solid #cde2f5;
  background:#fff;
}
.tier_price_break thead th{
  border:none;
  border-bottom:1px solid #cde2f5;
}
.tier_price_break thead th:nth-child(2){
  border-left:1px solid #cde2f5;
}
.tier_price_break tbody td{
    border:1px solid transparent;
}

Please check this link https://jsfiddle.net/aasim2001/k012wy0f/#&togetherjs=6lc9KgDEuf

Upvotes: 1

Nitesh
Nitesh

Reputation: 1550

Your CSS is very disturbed one. You have used unnecessary border-radius and border-collapse.

I made changes and this is updated fiddle: Check this:

https://jsfiddle.net/ahtfp21u/

There is still a scope of improvement in your CSS:

CSS:

.tier_price_break{
    width: 225px;
}

   /* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/


.tier_price_break {
    border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    float: right;
    border-spacing: 0;
}

.tier_price_break > td {
    height: 15px;
}

thead th, tbody > tr > td {
    padding: 0px 0px !important;
    border: none;
}

.tier_price_break > thead > tr > th{
    padding: 0px 0px !important;
}

@media only screen and (max-width: 768px){
    .tier_price_break {

        float: none !important;
    }
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .tier_price_break{
        width: 180px !important;
    }
}

.tier_price_break > tbody {
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 4px;
}

Upvotes: 0

gaganshera
gaganshera

Reputation: 2639

Change your css to this:

 .tier_price_break{
    width: 225px;
}

   /* .tier_price_break, td, th {
    border: 1px solid #ddd;
}*/

.tier_price_break {
    border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    /*border: 1px solid #cde2f5; /*#ddd;*/
    border-radius: 8px;
}

.tier_price_break {
    border-collapse: separate;
    float: right;
    border-spacing: 0;
}

.tier_price_break > td {
    height: 15px;
}

.tier_price_break > tbody > tr > td {
    padding: 0px 0px !important;
    border: none;
}

.tier_price_break > thead > tr > th{
    padding: 0px 0px !important;
}

Upvotes: 0

Jibin.Jay
Jibin.Jay

Reputation: 342

I have updated the css, try it.

<style type="text/css">.tier_price_break {
  width: 225px;
}


/* .tier_price_break, td, th {
        border: 1px solid #ddd;
    }*/

.tier_price_break,
td {
  border: 1px solid #cde2f5;
  /*#ddd;*/
  border-radius: 8px;
}

.tier_price_break,
th {
  border: 1px solid #cde2f5;
  /*#ddd;*/
}

.tier_price_break {
  border-collapse: separate;
  float: right;
  border-spacing: 0;
}

.tier_price_break>td {
  height: 15px;
}

.tier_price_break>tbody>tr>td {
  padding: 0px 0px !important;
  border: none;
}

.tier_price_break>thead>tr>th {
  padding: 0px 0px !important;
}

@media only screen and (max-width: 768px) {
  .tier_price_break {
    border-collapse: collapse;
    float: none !important;
  }
  .tier_price_break {
    width: 180px !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .tier_price_break {
    width: 180px !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .tier_price_break {
    width: 180px !important;
  }
}

.tier_price_break>tbody {
  border-collapse: collapse;
  border-collapse: separate;
  border-spacing: 4px;
}

.tier_price_break tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.tier_price_break tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

.tier_price_break thead tr:nth-child(2) th {
  border: none;
}

</style>
<table class="tier_price_break" cellpadding="0" cellspacing="0" border="1">
  <thead>
    <tr>
      <th colspan="2">
        <div style="text-align: center;">
          Quantity Discounts
        </div>
      </th>
    </tr>
    <tr>
      <th style="width: 50%;">
        <div style="text-align: center;">
          Qty.
        </div>
      </th>
      <th style="width: 50%;">
        <div style="text-align: center;">
          Pack Price
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div style="text-align: center;">
          50
        </div>
      </td>
      <td>
        <div style="text-align: center;">
          $0.28
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="text-align: center;">
          500
        </div>
      </td>
      <td>
        <div style="text-align: center;">
          $0.21
        </div>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions