I have an HTML table with many rows and several columns. I want to append a td to some of these rows such that the td would look like a new row and span the entire width of the table. This is useful to keep all of the data for a single table row under the same tr tag and would allow me to show extra data that relates to that same row but that won't fit in a single table column, like long-form notes. For example:
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td class="magic" colspan="3">
This is long-form data that should look like a full-width
row without creating an extra tr tag to hold it.
</td>
</tr>
</tbody>
</table>
Note that the same table also uses jquery-ui's sortable api to allow the rows to be drag/dropped in order to sort them. Also, the end result is then printed.
How do I do this without messing up my markup with illegal divs or abandoning html tables altogether?
You can use CSS flexbox property to achieve what you are trying, use a class selector for the specific row you want to span the width.
Flexbox has a property flex-direction which let's define the flow of the children of a component to either column or row
Example; Link to a codepen demo
Ps; I have not tested it on a jguery UI.
You can use the colspan attribute for this:
<tr>
<th colspan="5">Full-Width Row</th>
</tr>
Replace the 5 with the number of columns in the table. I haven't confirmed this works with jQuery UI, but it's pretty quick to test it out.
Related
When creating a HTML table in an Email, how can add space above one row, but not above all of them?
Example: I have a table that is two columns wide. Part way down the table I am inserting a 'sub header' of sorts by having one cell merge the two columns. Above this row, I want to have more space, but I don't want to apply this above all rows, like css would commonly do.
Any suggestions?
Your code should be inline anyway, because many email clients do not read embedded styles (the code within <style>...</style>).
I.e., as #David said in comments,
<table>
<tr>
<td>...
</td>
<td>...
</td>
</tr>
<tr>
<td style="padding-top:30px">Sub-header
</td>
</tr>
</table>
You can't use margin as Outlook desktops don't allow it.
An alternative that might suit you is a faux-table row, with a non-breaking space set at a specific height (both parameters there are necessary for cross-email-compatibility):
<tr>
<td style="font-size:30px;line-height:30px;">
</td>
</tr>
Note: I'm not looking for a parent of an element. I'm looking for an element that contains other elements within it.
I’m using Rails 4.2.7 and I'm using Nokogiri to parse HTMl documents. I want to find the table in my document whose first row (first tr element) has at least one th element. How do I write a CSS selector for that? Note that I only want to select the table, not the th elements themselves. Here is an example of the table I would hope to select from within the document
<table>
<tbody>
<tr>
<th>Header 1</th>
</tr>
<tr>
<td>Other data</td>
</tr>
…
</tbody>
</table>
You can try to use the Array#select method that filter all the tables where the first tr contains a th element.
For example, suppose you have a Nokogiri object called doc:
require "nokogiri"
require "open-uri"
url = # your url
doc = Nokogiri::HTML.parse(open(url))
tables = doc.css("table").select do |table|
# consider only the first row of each table
first_row = table.css("tr").first
# check if that row's children contains a <th> element
first_row.children.map(&:name).include?("th")
end
I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
I want to match the header column width of a table with the column width of a different table using css.
How can I do this?
<div class="datagrid">
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
<div class="datagrid" style="height: 500px; overflow:auto;">
<table>
<tfoot>
</tfoot>
<tbody>
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
</tbody>
</table>
</div>
What have you got in between the two tables ?
my initial thought was to create a new table row and use COLSPAN="3", & put whatever text you like.
effectively, the lower cells will match up with the upper cells, & the middle text will not look like its part of the table.
(use various commands / settings to HIDE the table borders - so it doesn't look like part of the table.)
hope that makes sense
In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>