I would like to have a table on my website that is a fixed size and allows for scrolling. Right now the table takes up the entire page because it has many rows of data. I want to limit the height and make the table scrollable so it does not take up the whole page. Here is my code for the table. I tried to wrap the table in a div and set overflow: auto but that did not seem to work.
<table class="table table-dark">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
Set table height fixed. Something like 300px or so. It makes a virtical scroll bar
Try follow code
<table class="table table-dark table-responsive" style="height:500px;width:100%">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
Related
I want to give to each of my table <th>'s an identifier, so It won't matter the other when I am using the <td> (while I know the identifier), I found this (HTML headers Attribute), which seems like what I need:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone#example.com</td>
</tr>
</table>
But I change the order of the <td>'s like this, first the email and then the name:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="email">someone#example.com</td>
<td headers="name">John Doe</td>
</tr>
</table>
And as you can see the result that I get is the same.
The header attribute has no effect on presentation; it will not swap table cells around. The header attribute simply denotes which <th> cells the <td> cells relate to for the purposes of enhancing screen readers:
This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the <th> element alone or the <th> element with the scope attribute.
Note that each <td> cell can relate to more than one header cell, if the table contains more than one header row. For example:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
In order to swap table cells around, you'd be much better off using either flexbox (making use of flex-direction) or a JavaScript solution.
I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.
<table class="table table-sm table-hover">
<thead class="thead-inverse">
<thead>
<tr>
<th colspan="6"></th>
<th colspan="3">Current Month</th>
<th colspan="3">Year-to-Date</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
<th colspan="6">Cars</th>
<td colspan="3">456 mi</td>
<td colspan="3">700 mi</td>
</tr>
<tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
<td colspan="1"></td>
<td colspan="5">Toyota</td>
<td colspan="3">534 mi</td>
<td colspan="3">800 mi</td>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="5">Honda</th>
<td colspan="3">600 mi</td>
<td colspan="3">770 mi</td>
</tr>
</div>
</tbody>
</table>
If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:
(function() {
$('#carsTable .toggle').on('click', function() {
$('#carsTable .hideableRow').toggleClass('hiddenRow');
});
})()
https://jsfiddle.net/q4w8062y/1/
Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:
https://jsfiddle.net/wkmmro89/1/
http://www.w3.org/TR/html-markup/table.html#table
I have a simple table from Twitter Bootstrap v3.0.3. It is just 2 columns. Below is the html code for the table.
<table class="table table-bordered">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Address</td>
<td>Test</td>
</tr>
</tbody>
</table>
I would like the columns of the table to be closer to each other. How can this be done? Thank you.
If I understand correctly, you want the width of the table to fit the content.
The simplest way to do this would be to set width: auto:
<table class="table table-bordered" style="width: auto">
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
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.