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.
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With