I'm currently working on a rails application where I want to highlight a row with a background colour, but in addition to that, within that row highlight a data cell with a different colour.
The problem I have is the styling for the td appears to be ignored. I just get the background colour for the whole row.
Inspecting the css client side it appears that the styling I apply for the td simply isn't there.
The generated html
<table id="project-table" class="table table-hover">
<thead>
<tr>
<th>Row</th>
<th>Fubar</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row cheese">
<td>Row 1</td>
<td class="'wibble'">Hello World</td>
</tr>
</tbody>
</table>
The sass
#project-table tbody tr.cheese {
background-color: yellow;
& td.wibble {
background-color: blue;
}
}
What am I doing wrong?
ps: using bootstrap 3 but I don't think that's relevant to this issue, is it?
UPDATE [SOLVED]
Ok, it appears I was being blind and hadn't realised an extra set of double quotes were being generated for class="'wibble'" - thanks to #Dekel for quickly pointing that out, and allowing me to find the cause of the real issue.
To solve the issue of the generation of extra quotes I had to mark the output as html_safe:
<td<%= ((index == #project.active_pattern_index) ? ' class="wibble"' : '').html_safe %>>
<%= pattern.row(count).instruction %>
</td>
The class in the td tag should be wibble (and not 'wibble').
You should not use the single-quotes inside the class attribute classes: ''
<table id="project-table" class="table table-hover">
<thead>
<tr>
<th>Row</th>
<th>Fubar</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row cheese">
<td>Row 1</td>
<td class="wibble">Hello World</td>
</tr>
</tbody>
</table>
Related
I am currently trying to make a table-based header to repeat each time a page-break occurs. My table-header repeat correclty if it does not contain any table inside.
I'm using this code :
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
...
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
...
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
...
</td>
</tr>
</tbody>
</table>
And this CSS :
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
I can put anything I want in my th.report-header-cell, this will work. But not if I put another table inside. Is there a trick to get ride of this kind of problem ?
I tried to change the display of my tables, not working also.
I'm running on Google Chrome & my projet use Bootstrap 4 tables, but notice that basic tables will not work also.
EDIT : Here is how I put a table in my th.report-header-cell :
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<table style="width:100%;">
<tbody>
<tr>
<td style="width:50%;">
...
</td>
<td style="width:50%;">
...
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</thead>
</table>
This example will not print my header in each page, but only on the first one. The footer will continue to work and will be printed on each page.
Notice that 'inverted' means the <tr> now represents a column .
I inverted an HTML table using this CSS code (which I found on internet) :
table {
border-collapse: collapse;
}
tr {
display: block;
float: left;
}
th,
td {
display: block;
border: 1px solid black;
}
<table>
<tr>
<th>name</th>
<th>id</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td rowspan="2">1</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>6</td>
<td>666</td>
</tr>
</table>
The CSS code inverted the table successfully , the problem comes when I try to use rowspan or colspan , it doesn't work . How can I fix it ?
By converting your table to blocks, it's no longer actually a table. I do not believe you will be able to do what you are asking for with this CSS ruleset because rowspan and colspan are table properties.
The best solution is to write your table differently. HTML allows you to write tables with the headers along the side like this:
<table>
<tr>
<th>name</th>
<td>James Bond</td>
<td>Lucipher</td>
</tr>
<tr>
<th>id</th>
<td colspan="2">1</td>
<td>6</td>
</tr>
<tr>
<th>number</th>
<td>007</td>
<td>666</td>
</tr>
</table>
If the problem is related to a SQL query needing to be turned you can dump your data into a matrix of values, then rendering it sideways, or in some cases, there are ways to change your query to do this, but those solutions can be pretty confusing depending on the complexity of your data.
I have some problem using HTML tables.
Below I have a table structure.
<table>
<caption>Movie Details</caption>
<thead>
<tr>
<th axis="m" header="movie">Movie Name</th>
<th axis="g" header="genre"> Genre</th>
</tr>
</thead>
<!-- note: rows generates dynamically using loop -->
<tbody>
<tr>
<td axis="m">Aanjana Anjani</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Bodyguard</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Gajini</td>
<td axis="g">Action</td>
</tr>
<tr>
<td axis="m">Singham</td>
<td axis="g">Action</td>
</tr>
</tbody>
</table>
Currently this table is sorted by movie name, now
Is there any way that, if I swap the column in <thead> then <tbody>,
data is swapped automatically (means tbody looking to thead and then
display ) using only HTML?
means if I change the column order ( genre is first column now),
<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>
then column of each row of <tbody> should be changed.
I think the axis and headers attributes may be helpful for this but not getting the exact.
Reference for axis in headers.
You can if you're willing to consider (just a little) CSS. In the example below, you "switch columns" simply by swapping the names of the CSS classes. (that is, change .right to .left, and .left to .right). You don't have to make any changes to the HTML in the table itself.
<style type="text/css">
.right {width:100px; float:right;}
.left {width:100px; float:left;}
</style>
<table>
<thead>
<tr>
<td width="250px">
<div class="right">LEFT</div>
<div class="left">RIGHT</div>
</td>
</tr>
</thead>
<tr>
<td width="250px">
<div class="right">L Data</div>
<div class="left">R Data</div>
</td>
</tr>
</table>
What do you mean by "if i change the column order"?
You can only change the HTML structure in real time using JavaScript.
If you want to change it without JavaScript you then have to reload the page with a server side language like PHP which will sort the table and write the HTML code differently.
Anyway you choose, swapping only the <thead> content or replacing it is not enough. You still have to replace/change the content of the <tbody> also to see the items sorted in the new way.
In HTML we can use <tbody> and <thead>.
Which works fine with a 'normal' table.
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1-1</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
However sometimes there is a rotated table:
<table>
<tr>
<th>col1</th>
<td>data1-1</td>
</tr>
<tr>
<th>col2</th>
<td>data1-2</td>
</tr>
</table>
When I use a rotated table I never use <tbody> or <tbody>.
However if I'm correct the <tbody> is mandatory if a <tfoot> is used.
Does a <tr> have to be inside a <tbody>
So my question is:
Is the above statement correct (that it is indeed mandatory if a <tfoot> is used)?
If so where would you add <thead>s and <tbody>s in the second example table?
According to the W3 specification the tbody tag is always mandatory unless your table has only one table body and there is no header and foot sections.
In your case you can use:
<table>
<tbody>
<tr>
<td>col1</td>
<td>data1-1</td>
</tr>
<tr>
<td>col2</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
That is HTML valid. Since you don't have "real" header on top of the table I think no header tag applies here. I'm not sure rotated tables are supported by HTML convention, so you basically have a normal table with only body.
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
What's your preferred way of writing HTML tables that have vertical headers?
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
Header 1 data data data
Header 2 data data data
Header 3 data data data
They look like this, so far I've come up with two options
First Option
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
Second Option
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
The First Option... I think it is the better and simple approach..
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr>
<th colspan="0">hours:</th>
</tr>
<tr>
<th colspan="1">Monday</th>
</tr>
<tr>
<th colspan="1">Tuesday</th>
</tr>
<tr>
<th colspan="1">Wednesday</th>
</tr>
<tr>
<th colspan="1">Thursday</th>
</tr>
<tr>
<th colspan="1">Friday</th>
</tr>
<tr>
<th colspan="1">Saturday</th>
</tr>
<tr>
<th colspan="1">Sunday</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
div.vertical {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
<table>
<thead>
<tr>
<th class="vertical">
<div class="vertical">Really long and complex title 1</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 2</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 3</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
</tbody>
</table>