One of the answers to my previous question states that colgroup/col should work in IE only.
I've wrote an example (see below) that works on IE9 (centers cells content in the the 3rd column), but doesn't work on the latest version of Chrome.
What I did wrong?
Example of HTML:
<html>
<head><title>test table centerring</title></head>
<body>
<table border="1">
<colgroup>
<col/>
<col/>
<col align="center">
</colgroup>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>2</td>
<td>Name 2, Name 2, Name 2, Name 2</td>
<td>Value 2</td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td>Value 3</td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td>Value 4, Value 4, Value 4, Value 4</td>
</tr>
</tbody>
</table>
</body></html>
Actually, I was pretty sure that only IE supports that, but was confused by one of the answers to question Is there any way to center certain columns in table?. The author of answer pointed also to some restrictions:
http://www.quirksmode.org/css/columns.html
Unfortunately table columns are quite hard to use, because if you use them you essentially have a table that's subdivided in two ways: by rows and by columns. The general rule is that any style defined on a row overrules any style defined on a column.
Secondly, W3C specifies that only a few declarations may be used on columns: border, background, width and visibility. Exception: IE7 and lower allow all declarations.
Thirdly, there's some confusion whether the column styles are applied to the column as a whole, or to the individual <td>s contained by it. The border declaration seems to be applied to the column as a whole, but width is applied to the individual cells.
That made colgroup/col pretty much useless for centering.
Related
My name is David, I am a beginner and I have some difficulties finding a solution to my problem:
I have a page with a table, on a WordPress site. The table is too big for small devices, such as mobile phones, and I would like to go from 4 columns to 2 columns for these devices. What I would like the browser to do is to "cut" the last two columns and place them just below of the first two, because the first and the third column and the second and the forth columns contain the same information.
This would be a simplifier version of the html code:
<table>
<tbody>
<tr>
<th>Artículo</th>
<th>Descripción</th>
<th>Artículo</th>
<th>Descripción</th>
</tr>
<tr>
<td>Image 1</td>
<td>International Edition ...</td>
<td>Image 2</td>
<td>Green Box</td>
</tr>
<tr>
<td>Image 3</td>
<td>Blue Box ...</td>
<td>Image 4</td>
<td>Red Box ...</td>
</tr>
<tr>
<td>Image 5</td>
<td>Absurd Box ...</td>
<td>Image 6</td>
<td>The Bigger, Blacker Box ...</td>
</tr>
</tbody>
I have thought that it may be possible to tackle this with CSS, but all the information I have found on the internet does not match exactly this problem.
Do you know how this could be done?
Thank you very much!!!!
I'm in a bit of a struggle with finding and clicking a specific link.
All links in a HTML table contain the word 'Edit' (it's an 'Edit' link for a configuration setting).
However, the link varies per environment I'm working on, so only the 'Edit' bit of the link is consistent.
In the HTML of the page, I found that this link is part of a table also containing the configuration setting that I want to edit.
I've been struggling for a few hours now to find this link through Xpath, through CSS... Basically I need someone's help on this. Hence my post here!
The HTML of the page looks like this (I anonymized it -- is that even a word?):
<table>
<thead>
<tr>
<th>edit</th>
<th>Name</th>
<th>Value</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>Configuration 1</td>
<td>This is its value</td>
<td>This is its explanation</td>
</tr>
<tr>
<td>Edit</td>
<td>Configuration 2</td>
<td>This is its value</td>
<td>This is its explanation</td>
</tr>
<tr>
<td>Edit</td>
<td>Configuration 3</td>
<td>This is its value</td>
<td>This is its explanation</td>
</tr>
</tbody>
</table>
Can someone please give me some pointers as to how I can get to each 'Edit' link, based on the 'configuration'?
Thanks a lot in advance. It will really save me a headache!
You can scope Capybaras finds and actions to other elements, therefore
find(:css, 'tr', text: 'Configuration 2').click_link('Edit')
would click the edit link inside the tr that includes the text 'Configuration 2'
So I have a table like so,
<table>
<tbody>
<tr>
<td colspan="6">My 6 headers</td>
</tr>
<tr>
<td colspan="6">My 6 inputs</td>
</tr>
<tr>
<td colspan="3">Indent 3 columns</td>
<td colspan="3">
<table>
<tbody>
<tr>
<td>repeating column 1</td>
<td>repeating column 2</td>
<td>repeating column 3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
My issue is that, <td>repeating column 1</td> lines up with <td>My 4th input</td> column, but <td>repeating column 2</td> starts immediately after <td>repeating column 1</td> isntead of lining up with <td>My 5th input</td>. How can I align them?
jsFiddle: http://jsfiddle.net/pL89ykLp/
It isn't possible with nested tables unless you set the width to something fixed, and make pixel perfect corrections. This approach is highly unmaintainable.
Instead, don't use tables for layout, and use some proper semantic markup. What kind of semantic markup? That's hard to know without knowing the context of your application.
There's no need for the a nested table in the last tag. Change the second row to this:
<tr>
<td colspan="3">Indent 3 columns</td>
<td>column 1</td>
<td>repeating column 2 </td>
<td>repeating column 3</td>
</tr>
Fiddle:
http://jsfiddle.net/9ywaqf1L/
I have a table consisting of a header row and a couple of data rows. What I want to do is to create a blank row in between the header and the data rows, but I want this blank row to be smaller in height than the other rows (so that there isn't such a large gap).
How can I accomplish this?
My HTML mark-up code for the table is as follows:
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#FFFFFF" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
Just add the CSS rule (and the slightly improved mark-up) posted below and you should get the result that you're after.
CSS
.blank_row
{
height: 10px !important; /* overwrites any other rules */
background-color: #FFFFFF;
}
HTML
<tr class="blank_row">
<td colspan="3"></td>
</tr>
Since I have no idea what your current stylesheet looks like I added the !important property just in case. If possible, though, you should remove it as one rarely wants to rely on !important declarations in a stylesheet considering the big possibility that they will mess it up later on.
Try this:
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </td>
You don't need an extra table row to create space inside a table. See this jsFiddle.
(I made the gap light grey in colour, so you can see it, but you can change that to transparent.)
Using a table row just for display purposes is table abuse!
I know this question already has an answer, but I found out an even simpler way of doing this.
Just add
<tr height = 20px></tr>
Into the table where you want to have an empty row. It works fine in my program and it's probably the quickest solution possible.
This one works for me:
<tr style="height: 15px;"/>
I wanted to achieve the same as asked in this question but accepted answer did not work for me in May, 2018 (maybe answer is too old or some other reason). I am using bootsrap 3.3.7 and ionic v1.
You need to set line-height to do set height of specific row.
.blank_row {
line-height: 3px;
}
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#000" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
I couldn't get anything to work until I tried this simple line:
<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>
which allows you to vary a filler line height to your hearts content
(I was [probably MISusing Table to get three columns (boxes) of text which I then wanted to line up along the bottom)
I'm an amateur so would appreciate comments
I'm sure this is an easy problem to solve, but I'm just not much of a html/css wizard yet!
I have a table that I generate and the spec calls for there being a fixed header while allowing the body to be scrollable.
The problem is, now the horizontal direction is scrollable also, which I don't want it to be. There is no reason it can't be fixed. It looks like the presence of the scroll bar for the vertical direction takes up space so that the browser now thinks that it needs a horizontal scroll to fit in the horizontal content. Frustrating!
Here is what I have so far:
<table cellspacing="0" cellpadding="4" border="1" bordercolor="cccccc">
<thead style="position:relative;">
<tr bgcolor="eeeeee">
<td>Column 1 Header</td>
<td>Column 2 Header</td>
</tr>
</thead>
<tbody style="overflow-y:auto;overflow-x:hidden;height:480px;">
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</tbody>
</table>
Tau, Check out www.datatables.net. It's a Jquery plugin that reformats your tables via JS and allows for sorting, paging, etc. The header "freeze" is exactly the functionality that would solve your problems, and the extra features are just bonus. I've stopped using the "freeze" method and switched nearly entirely to paged tables, which are just a single line of configuration to enable. Personally, I don't deploy tabular data without it anymore, and the extra 5 lines of code only takes me a minute or two to add. It's a win-win in my book, no crazy CSS or reformatting required.