I'm working in a project, where I am making a table, which looks something like this:
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr> <!-- this should be full width -->
<td colspan="3"><span> Very long long text</span></td>
</tr>
<tr>
<td>Col content 1</td>
<td>Col content 2</td>
<td>Col content 3</td>
</tr>
</tbody>
</table>
I want the first tr, to be a full width element.
What is happening now is that the td[colspan="3"] uses 1 column, so the first column of the last tr, is larger.
EDIT
Here is a basic example, first column is very long, much that it's content, making every thing go off screen
you are using html, so to change the css, you need to say :
style="colspan:3;"
that should work
there is no issue with your tags you better clear the cache of your browser
sometimes it happens on chrome press CTRL+F5 to clear the cache or use another browser like Firefox if you are using the Firefox press CTRL+F5.
Related
I have an HTML file that I convert to PDF using the Wkhtmltopdf tool.
I am using page-break-inside: avoid style to escape table wrapping in pages (if there is no place on the current page for the table the whole table goes to a new pdf page), and it works great for tables.
The question is
I have this kind of table
<table >
<caption>Payments</caption>
<tbody>
<tr>
<th>line 1</th>
<td>100.00</td>
</tr>
<tr>
<th>line1 note 1</th>
<td>120.00</td>
</tr>
<tr>
<th>line1 note 2</th>
<td>20.00</td>
</tr>
</tbody>
<tbody>
<tr>
<th>line 2</th>
<td>100.00</td>
</tr>
<tr>
<th>line2 note 1</th>
<td>120.00</td>
</tr>
<tr>
<th>line2 note 2</th>
<td>20.00</td>
</tr>
</tbody>
</table>
where each block is tbody inside one big table, as the block can be too long and it can be bigger than one pdf page I want to wrap it by tbody, not by the table. I want the new tbody block to start from the new page (instead of cutting inside tbody block) if there is no place on the current page.
I currently have a problem making my HTML table responsive.
I have a html table where I have 4 columns, each with 25% width. On the desktop, the table looks great.
The first column has 10 rows, in each row there's a description text. The next 3 columns are product columns, where each one of them has a product with some information about it.
Since I can't show that many columns on a mobile phone, I'd like to basically have only the first column (description) + a product column shown on my mobile phone. Because otherwise, people don't know what the information stands for in the product column.
I hope someone can help me, thanks!
I already made up the table with the CSS, and tried to make each column 50% on mobile phones.
But the problem is that the first column should appear next to every product column.
Here is what I already have:
<table>
<thead>
<tr>
<th class="col-25">Preview</th>
<th class="col-25">Product 1</th>
<th class="col-25">Product 2</th>
<th class="col-25">Product 3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-25">Description</th>
<td class="col-25">Product name 1</td>
<td class="col-25">Product name 2</td>
<td class="col-25">Product name 3</td>
</tr>
<tr>
<th class="col-25">Price</th>
<td class="col-25">Product price 1</td>
<td class="col-25">Product price 2</td>
<td class="col-25">Product price 3</td>
</tr>
</tbody>
</table>
CSS:
.table {
width: 100%;
border-collapse:collapse;
table-layout: fixed;
}
.col-25 {
width: 25%;
}
Okay, this is kind of tricky but I have a few solutions for your problem.
Try to use CSS breakpoints
If your device hits a certain width you hide the following columns.
https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
Use Bootstrap
Bootstrap has already breakpoints built-in. You could build your table with their fantastic grid system.
https://getbootstrap.com/docs/4.3/getting-started/introduction/
https://getbootstrap.com/docs/4.1/layout/grid/
If you would post your example, I could take a further look but I think these two tips should give you an idea of how you can solve this problem yourself.
(Sorry for my bad english)
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 Table with multiple columns and rows,
Example,
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>
//Image is loaded from external URL.
<img src="${Url}/school/${value}/image?size=tb" />
</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
Problem: This is working fine in all the browser but in IE6 browser hangs. My Table just having 10 records. (If I remove the image then working fine.)
Please some one give me some ideas on this issue.
It is a cross-browser issue. Have you tried to not close the img tag? I mean try this,
<img src="${Url}/school/${value}/image?size=tb">
BTW, it should not matter, actually.