CODEWITHSUNDEEP
htmlcss
RSKMR
RSKMR

Reputation: 1892

Html Table - Add border in table using css

I am using html table and css, I am trying to add border for table, I added the border but is display border width 100%, because i am using display:block;

If I replace display:block to display:inline-block the horizontalscroll bar display, It's possible to remove the horizontal bar without using overflow-x:hidden

When we add the more td,th means the horizontal scrollbar should come under static div not window/screen.

Note: Not able to add anything in html. I can able to overwrite the css only. So please it's possible to change only in css.

I added my code in jsfiddle: clik here

It's simple to everyone but I am struggle little bit here.

.static table {
    border-collapse: collapse;
    display: block;
    margin-bottom: 23px;
    overflow-x: auto;
    width: auto;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

I am expecting the table border width adjust based on td. also should be in block element. clcik here

Note: I have more tr and td but I added sample only.

Upvotes: 5

Views: 11925

Answers (5)

Johannes
Johannes

Reputation: 67738

Just erase the display: block from the table - that's a contradiction: a table has display: table.

Also, your rows don't contain the same number of cells in all rows, which is invalid HTML. Either add emtpy cells or use colspans as I did in my snippet.

.static table {
    border-collapse: collapse;
    margin-bottom: 23px;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;" colspan="3"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;" colspan="2"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;" colspan="2">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;" colspan="2">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;" colspan="2">-</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

GMKHussain
GMKHussain

Reputation: 4661

border: 1px solid black;

.static table {
  border: 1px solid black;
}

Upvotes: 0

subramanian
subramanian

Reputation: 1305

quick fix give display inline-block instead of block to your table and remove overflow-x

       .static table{
        border-collapse: collapse;
        display: inline-block;
        margin-bottom: 23px;
        width: auto;
        }

updated fiddle http://jsfiddle.net/8ohv1o79/

Upvotes: 0

Geethu Jose
Geethu Jose

Reputation: 1993

Seperate css from html. Rewrite table styles as 

.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}


.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}

.static table tr {
  background-color: #E0E0E0;
}

.static table tr:nth-child(even) {
  background-color: #F1F1F1;
}

.static table tr:first-child td,
.static table tr:first-child th {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  padding: 10px 16px;
}

.static td {
  min-width: 100px;
}
<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 2

Anku Singh
Anku Singh

Reputation: 954

Instead of giving border to table you can apply border to tbody element it will get adjusted accordingly without any further change

<div class="static">
    <table>
        <tbody style="border: 1px solid black;">
            <tr>
                <td style="border: 1px solid black;"><strong>Account 
                Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Related Questions