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.
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'
I need add to some elements on top of a table in line with the columns of the said table.
This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.
Example:
<table>
<tbody>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</tbody>
<thead>
<tr>
<th>head</th><th>head</th><th>head</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
Although I understand this, I still need to find a way to have these elements stay in line with specific columns.
You can use multiple rows in <thead> like this:-
<table>
<thead>
<tr> <td>1</td> <td>1</td> </tr>
<tr> <td>head</td> <td>head</td> </tr>
</thead>
</table>
I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.
With that, have the thead first and the tbody last.
The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.
One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.
You can also place a div above your table using CSS.
Correct table structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<thead> will always be on the top and <tfoot> will always be at the bottom.
Using jQuery you can swap <thead> and <tbody> content by:
$(document).ready(function() {
$('#myTrigger').click(function() {
var top = $('thead').html();
var mid = $('tbody').html();
$('thead').html(mid);
$('tbody').html(top);
});
});
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.
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