how to change table specific column width in HTML?

Question

i have this below table.and i want to change a specific column width=>by changing its default width.previously i have done that.but now on this below table its not working for me.i dont know why.

i want to change those column where i add width:400px; i know css expert can help me about this.please help.i have a very little knowledge in css.

.namex {
        overflow: scroll;
    }

<div class="namex">
    <table class="table">
        <tr>
            <th>
                Full Name
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Profile Pic
            </th>
            <th style="width:400px;">
                Currently Assigned Courses
            </th>
            <th width="200px">
                Currently Assigned Batches
            </th>
            <th>
                Company Name
            </th>
            <th>
                City
            </th>
            <th>
                Phone Number
            </th>
            <th>
                Email Address
            </th>
            <th>
                Zip Code
            </th>
            <th>
                User Nationality
            </th>
            <th>
                Gender
            </th>
            <th>
                Religion
            </th>
            <th>
                Blood Group
            </th>
            <th>
                Date Of Birth
            </th>
            <th>
                User Activation Date
            </th>
            <th>
                User Current Status
            </th>
            <th></th>
        </tr>

            <tr>
                <td>
                    md.amjad hossain
                </td>
                <td>
                    md.amjad
                </td>
                <td>
                    hossain
                </td>
                <td>
                    <img src="/Content/img/tsms/default/owner.jpg" height="80" width="80" style="border-radius:2px;" />
                </td>
                <td>
                    <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security">CCNA Security</option>
                                <option value="Oracle Database 12c">Oracle Database 12c</option>

                    </select>
                </td>
                <td>
                    <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security-1">CCNA Security-1</option>
                                <option value="Oracle Database 12c-1">Oracle Database 12c-1</option>

                    </select>
                </td>
                <td>
                    aiub
                </td>
                <td>
                    dhaka
                </td>
                <td>
                    1830954149
                </td>
                <td>
                    <a href="mailto:[email protected]">[email protected]</a>
                </td>
                <td>
                    1362
                </td>
                <td>
                    bangladeshi
                </td>
                <td>
                    male
                </td>
                <td>
                    islam
                </td>
                <td>
                    o+
                </td>
                <td>
                    2/25/1995
                </td>
                <td>
                    5/8/2017
                </td>
                <td>
                    Active
                </td>
                <td>
                    <a href="/Students/Edit/2">Edit</a> |
                    <a href="/Students/Details/2">Details</a> |
                    <a href="/Students/Delete/2">Delete</a>
                </td>
            </tr>
    </table>
</div>

in my case its look like ---

[![Pic of my table][1]][1]
  [1]: https://i.sstatic.net/d8Dr0.png

look 
 
        <th style="width:400px;">
            Currently Assigned Courses
        </th>
        <th width="200px">
            Currently Assigned Batches
        </th>

is not working after applying width.its still look like 0px.
thats my problem.

look

        <th style="width:400px;">
            Currently Assigned Courses
        </th>
        <th width="200px">
            Currently Assigned Batches
        </th>

is not working after applying width.its still look like 0px. thats my problem.

Could you be more specific and tell us exactly what's your problem? which column you want to change its width? — MHD Alaa Alhaj
– MHD Alaa Alhaj, Commented May 10, 2017 at 12:21
By seeing your code, you have tried setting it in two columns namely, Currently Assigned Courses and Currently Assigned Batches, which one is not rendering properly in your code? — David R
– David R, Commented May 10, 2017 at 12:21
This is because <td> and <th> are by default display: table-cell(UserAgent styles). If you change them to for example display: block, the width will take effect — Nikhil Nanjappa
– Nikhil Nanjappa, Commented May 10, 2017 at 12:35
By the way the width attribute of <th> is not supported in HTML5. Use CSS instead - <th style="width:400px;"> is fine — Nikhil Nanjappa
– Nikhil Nanjappa, Commented May 10, 2017 at 12:38

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

You should check out the colgroup elements. Instead of specifying widths on table headers, specify the required size on the col tags.

<table>
    <colgroup>
       <col>
       <col style="width: 100px">
       <!-- repeat as many cols as the number of headers -->
    </colgroup>
    <thead>
       <tr>
       <th> Header 1 </th>
           <th> Header 2 </th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td> DAta 1 </td>
           <td> Data 2 </td>
       </tr>
    </tbody>
</table>

Here what if you do not specify anything inside col tag, it will behave as browser default. Well as per w3schools

The <col> tag specifies column properties for each column within a element.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 10, 2017 at 12:25

Sagar

4974 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3005775 · Accepted Answer · 2017-05-10 12:32:53Z

0

you need to set a table width, by default the browser sets the table with at 100% of its with, and will try to fit all tds within that with, if you want to use a specific width, you need to also set a specific width of the table.

.table { width:1000px; }

just make sure that the width is enough to accomodate any padding, margins, or borders + text.

The specific widths you set for any td will not exceed the set width, but could still shrink smaller if you do not allow for sufficient total table width

answered May 10, 2017 at 12:32

user3005775

3061 gold badge3 silver badges14 bronze badges

Comments

iSR5 · Accepted Answer · 2017-05-10 13:00:33Z

If you want to customize the width of specific columns, you can always assign a class to that column, then it's a matter of styling that column through CSS. You'll also need to use !important to override any width property that has been assigned to that particular column. more about !important rule here : When Using !important is The Right Choice

The following is an example, you can use it as start guide.

.namex {
  overflow: scroll;
}

.table {
  display: table;
  width: 100%;
}

.width-lg {
    width: 400px !important;
}
.width-md {
    width: 200px !important;
}

<div class="namex">
  <table class="table">
    <tr>
      <th>
        Full Name
      </th>
      <th>
        First Name
      </th>
      <th>
        Last Name
      </th>
      <th>
        Profile Pic
      </th>
      <th class="width-lg">
        Currently Assigned Courses
      </th>
      <th class="width-md">
        Currently Assigned Batches
      </th>
      <th>
        Company Name
      </th>
      <th>
        City
      </th>
      <th>
        Phone Number
      </th>
      <th>
        Email Address
      </th>
      <th>
        Zip Code
      </th>
      <th>
        User Nationality
      </th>
      <th>
        Gender
      </th>
      <th>
        Religion
      </th>
      <th>
        Blood Group
      </th>
      <th>
        Date Of Birth
      </th>
      <th>
        User Activation Date
      </th>
      <th>
        User Current Status
      </th>
      <th></th>
    </tr>

    <tr>
      <td>
        md.amjad hossain
      </td>
      <td>
        md.amjad
      </td>
      <td>
        hossain
      </td>
      <td>
        <img src="/Content/img/tsms/default/owner.jpg" height="80" width="80" style="border-radius:2px;" />
      </td>
      <td>
        <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security">CCNA Security</option>
                                <option value="Oracle Database 12c">Oracle Database 12c</option>

                    </select>
      </td>
      <td>
        <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security-1">CCNA Security-1</option>
                                <option value="Oracle Database 12c-1">Oracle Database 12c-1</option>

                    </select>
      </td>
      <td>
        aiub
      </td>
      <td>
        dhaka
      </td>
      <td>
        1830954149
      </td>
      <td>
        <a href="mailto:[email protected]">[email protected]</a>
      </td>
      <td>
        1362
      </td>
      <td>
        bangladeshi
      </td>
      <td>
        male
      </td>
      <td>
        islam
      </td>
      <td>
        o+
      </td>
      <td>
        2/25/1995
      </td>
      <td>
        5/8/2017
      </td>
      <td>
        Active
      </td>
      <td>
        <a href="/Students/Edit/2">Edit</a> |
        <a href="/Students/Details/2">Details</a> |
        <a href="/Students/Delete/2">Delete</a>
      </td>
    </tr>
  </table>
</div>

Collectives™ on Stack Overflow

how to change table specific column width in HTML?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related