Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Column width for <th> not working

Here is my html:

     <html>
<head>
<meta charset="utf-8">    

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">

</head>
<body style="padding-top: 47px;">

<table class="table table-hover table-striped-custom">
    <thead>
        <tr>
            <th style="width: 5px;"></th>
            <th>Column2</th>
            <th>column2</td>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td style="background-color: #FF5F5F;width: 5px;"></td>
                <td>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>bla</td>
            </tr>
            <tr>
                <td style="background-color: deepskyblue"></td>
                <td>bla</td>
                <td>bla</td>
            </tr>

    </tbody>
</table>

Problem is when setting width for first column: it won't go under 16px. If I put bigger width(20,50), colored column become larger, but when I try to set them thinner (for example 7px), It doesn't take any effect. How can I do it, without removing any css class from existing template. Colored column have to be first, it's height must be as row's height and I have to be able to set it's width to any value I want.

like image 418
Error Avatar asked Sep 15 '14 14:09

Error


People also ask

How do you find the width of TH in a table?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.

How do I fix column size in HTML?

The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.

How do you reduce the width of TH in a table?

You can try table-condensed class in your table. The . table-condensed class makes a table more compact by cutting cell padding in half. This is a quick solution.

How do you do th width in HTML?

HTML | <th> width Attribute The HTML <th> width Attribute is used to specify the width of a table header cell. If width attribute is not set then it takes default width according to content. It is not supported by HTML 5.


Video Answer


1 Answers

It's because your bootstrap css is adding 8px padding to the table cells (which is why your min width is 16px: 8px left plus 8px right) - try adding padding:0; for those cells and it should work

Example

like image 137
Pete Avatar answered Sep 28 '22 13:09

Pete