I have a table created using HTML and Bootstrap 3 like in the following example.
Even if I set a fixed column width through the width attribute in the colgroup this is not applied and I am not able to set a column width at all here.
Can someone tell me if this needs to be done differently when using Bootstrap 3 or if I am missing something else here?
In this case I want to set the column width of a specific column (here the 3rd one) to 70px.
Example table:
<table class="table table-condensed table-responsive tableDT">
<colgroup>
<col />
<col />
<col width="70px" />
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>No. of Items</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some number</td>
<td><button type='button' class='btn btn-primary btn-xs'>View</button></td>
</tr>
</tbody>
</table>
You do not use 'px'. you just give it as width="70"
you can do it in css as well as:
colgroup col:last-child{
width: 70px;
}
Related
How can I change the background color for a single column in html? I have several html pages linked to a css file with a 12-column grid, and I to change the background of one column in some of the html pages to a different color than the regular background color (white), but not the other columns. Also, I would like to change the text color of this column. How can I do that?
Pertinent to the HTML table element, it can be achieved as shown in the following sample:
<table>
<tr>
<td></td>
<td style="background-color:#909090;"></td>
<td></td>
</tr>
</table>
or, in more sophisticated way using CSS3 style like:
table td:nth-child(2)
{
background-color:#909090;
}
Hope this will help.
If you didn't build your layout with <table> but with <div> tags, you can achieve it like this:
<div class="container">
<div>
First column
</div>
<div style="background-color: red">
Second column
</div>
...
</div>
Or, in CSS:
.container div:nth-child(2) {
background-color: red;
}
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
I've got a little webpage I've been working on for the fun of it, but there is an undesired result.
There are 2 tables that by default show up with the columns aligned, as I desire. They both have 100% page width, and the cells within share the same specified width. The final cell does not have a width specified so that it can expand if the page width is increased thus keeping the table at 100% of the page width. No heights are specified so cells can grow infinitely if needed.
Table 1:
<!-- box_sorting -->
<table style="z-index:2;position:fixed;top:196px;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px;width:100%;min-width:1200px;background-color:#CCC;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-top:solid;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">Track</td>
<td width="300">Song</td>
<td width="300">Album Artist</td>
<td width="300">Album</td>
<td width="100">Genre</td>
<td width="75">Rating</td>
<td>Comments</td>
</tr>
</table>
Table 2:
<!-- box_tracklisting -->
<table style="z-index:1;position:relative;top:216px;margin-top:0px;margin-left:auto;margin-right:auto;width:100%;min-width:1200px;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>
The problem I'm having is that if the browser width decreases the top table shrinks too much, and no longer aligns with the bottom table. How can I prevent this?
How It Looks Normally:
How It Looks When Browser Window Width Is Reduced:
I'm using Mozilla Firefox, but I would prefer an answer that is compatible with the 5 major browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari. The page is optomized for viewing at a width of greater than 1200px. If you view it with a browser window of less than that there will be a horizontal scrollbar.
I think the best thing for this would be to utilise a jQuery plugin called DataTables
I've put some of your data into a dummy table so you can see how it works. Note the HTML is in order of 1,2,3,1,2,3 but the default load is to sort numerically, ie 1,1,2,2,3,3. There are loads of options to explore with DataTables; you could turn off the sorting feature, or give each track an index number.
http://jsfiddle.net/kDvp5/
For the sake of links going down in future, the example this is based off: http://www.datatables.net/examples/basic_init/scroll_y.html
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} );
Yeah, I would NOT use two separate tables and stick to the traditional layout using TH header. If you want it to be fixed, just set the position to fixed:
<tr style="position: fixed;">
<th width="75">Track</th>
<th width="300">Song</th>
<th width="300">Album Artist</th>
<th width="300">Album</th>
<th width="100">Genre</th>
<th width="75">Rating</th>
</tr>
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>
However many tables you wish to use, the "width" attribute is deprecated. You can use a colgroup instead for both tables:
<colgroup>
<col style="width: 75px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 100px;" />
<col style="width: 75px;" />
<col />
</colgroup>
Add the colgroup to the beginning of each table, between <table> tag and your first <tr>. Should work uniformly across all browsers. You can also use CSS classes and assign column widths for both tables simultaneously, which would make changing them later on much easier.
In your HTML, in both tables:
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
<col />
</colgroup>
<tr>
<etc....>
Then, in your CSS:
.col1 { width: 75px; }
.col2 { width: 300px; }
.col3 { width: 300px; }
.col4 { width: 300px; }
.col5 { width: 100px; }
.col6 { width: 75px; }
... should get you what you need.
How can I style a table in html so it gets laid out like this:
<- full page width ->
<-20px->< dynamic ><-20px->< dynamic >
+------------------+-------------------+
¦ A ¦ B ¦ header row 1
+-------+----------+-------+-----------+
+ A1 ¦ A2 ¦ B1 ¦ B2 ¦ header row 2
+-------+----------+-------+-----------+
¦ a1 a2 b1 b2 ¦ data rows
Without the grouping header row, I would do it like this:
<table style="width:100%; table-layout:fixed;">
<tr>
<th style="width:20px;">A1</th>
<th style=" ">A2</th>
<th style="width:20px;">B1</th>
<th style=" ">B2</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>b1</td>
<td>b2</td>
</tr>
</table>
This works nicely, when I resize the browser window, the two cols without explicit width take the available space, while the two fixed cols stay at the given width.
But when I add the grouping header row, I have not found any way to assign widths so that the table has two fixed and two adaptable columns.
I can only test it on one browser here, but removing the table-layout fixs it here.
<table style="width:100%;">
<tr>
<th colspan="2">A</th>
<th colspan="2">B</th>
</tr>
<tr>
<th style="width: 20px;">A1</th>
<th>A2</th>
<th style="width: 20px;">B1</th>
<th>B2</th>
</tr>
<tr>
<td style="width: 20px;">a1</td>
<td>a2</td>
<td style="width: 20px;">b1</td>
<td >b2</td>
</tr>
</table>
Some browser do seem to have problems: Internet Explorer 8 table cell width bug with colspan set
I'd recommend using <colgroup /> and setting the widths via CSS (don't use inline styles if at all possible). As you saw, you need to set the width for each column when you have colspan involved, but that's really not an issue for HTML/CSS.
CSS
table{
width:100%;
.narrow{
width:40px;
}
.dynamic{
width:auto;
}
HTML
<table>
<colgroup class="narrow"/>
<colgroup class="dynamic"/>
<colgroup class="narrow"/>
<colgroup class="dynamic"/>
<tr>
<th colspan="2">A</th>
<th colspan="2">B</th>
</tr>
<tr>
<th>A1</th>
<th>A2</th>
<th>B1</th>
<th>B2</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>b1</td>
<td>b2</td>
</tr>
[ ... ]
</table>
http://jsfiddle.net/daCrosby/X7TgN/1/
With your contributions and some search in W3C docs, I came to this solution:
<table border="1" style="table-layout:fixed; width:100%;">
<col style="width:20px;">
<col style="width:50%;">
<col style="width:20px;>
<col style="width:50%;>
<tr>
<th colspan="2">A</th>
<th colspan="2">B</th>
</tr>
<tr>
<th>A1</th>
<th>A2</th>
<th>B1</th>
<th>B2</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>b1</td>
<td>b2 very long text</td>
</tr>
</table>
The table-layout:fixed is required to have the column widths as specified. Else the widths are calculated from cell contents, which is OK in the example but a trouble in reality.
In fixed layout, in absence of col elements, the first row is used to define the column widths. That's why cell widths worked with a single header row, but not with the grouping header. Providing col elements solves it.
<table style="width:100%; table-layout:fixed;">
<tr>
<th colspan="2">A1</th>
<th colspan="2">A2</th>
</tr>
<tr>
<th colspan="1">A1</th>
<th colspan="1">A2</th>
<th colspan="1">B1</th>
<th colspan="1">B2</th>
</tr>
<tr>
<td colspan="1">a1</td>
<td colspan="1">a2</td>
<td colspan="1">b1</td>
<td colspan="1">b2</td>
</tr>
</table>
Using colspan will solve your problem. Try the one above and let me know what you get.
I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
Why is this happening, and how can I get around this?
Two things you should do:
On the table element, use table-layout: fixed;
Insert columns and give them a width
(You could also assign width to table headers/cells of the first row)
Like this:
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->
Simple question, I was wondering, what in 2011 is the right way to size html tables? (containing tabular data, of course!)
Should the following still be the way to go?
<tr>
<th width="45%">Name</th>
<th width="10%">Author</th>
<th width="20%">Description</th>
<th width="10%">Rating</th>
<th width="15%">Download</th>
</tr>
Or would it be better to give each column an ID (or class) and set its width with CSS?
Thank you for your input!
You can use col or colgroup for that purpose.
<table>
<col class="x"/>
<col class="y"/>
<col class="z"/>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
...and apply styles to the classes:
col.x {
...
}
In 2011? From about 2000 onwards it was the better approach to use class-names and CSS styles to give table-cells their width.
Unless they're all the same width, in which case just use:
th /* or td */ {
width: 20%;
}
You could, conceivably, use nth-child too:
tr th:nth-child(1) {
/* styles the first th of the tr */
}
JS Fiddle demo, using nth-child() css.
I've taken to using colgroup and col tags, like this:
<table>
<colgroup>
<col width="45%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="10%"></col>
<col width="15%"></col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Author</th>
<th>Description</th>
<th>Rating</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
My personal preference is to use the width attribute on column tags.
<table>
<col width="15%"></col>
<col width="20%"></col>
...etc...
It keeps the presentation part out of the table content, so to speak.