CODEWITHSUNDEEP
htmlcss
Joemar Zeta
Joemar Zeta

Reputation: 53

Table body column not same width as the Header column

Hello i'm currently creating a table,The first header have a smaller text content than the other Header while its corresponding Column on the Body have wider/bigger content since its a name of a group. What i want to achieve is that the column's on the header and content should have corresponding width depending on which of them is wider.

Here is the fiddle of the table: https://jsfiddle.net/pynechan/b4s3brqc/19/

//HTML
    <h2>Header fixed</h2>
<br/>
<br/>

<table>
    <thead>
        <tr>
            <th>HEADER</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>1. DATA</td>
            <td>1. DATA 2</td>
            <td>1. DATA 3</td>
        </tr>

    </tbody>
</table>

//CSS


   table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

tbody{
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Upvotes: 1

Views: 7185

Answers (3)

Abhishek Konnur
Abhishek Konnur

Reputation: 531

Better use Bootstrap which aligns the table header and body properly

Upvotes: -2

Gerald 28
Gerald 28

Reputation: 81

just add this script in your css

th {width:1px;}

Upvotes: 3

Chirag Front End Developer
Chirag Front End Developer

Reputation: 74

Please use below css . And It's work for me.

table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
    width:100%;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;    
    width:100%;    
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;    
    width:100%;
}
tbody tr {    
    width:100%;    
}

tbody{
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Upvotes: 1

Related Questions