When printing an HTML table, you can use CSS to force the table's header row to display again after the page break. This style:
#media print {
thead { display: table-header-group; }
}
Results in:
Caption
-------------
Col1 | Col2
-------------
Data1 | Data2
Data3 | Data4
--Page Break--
Col1 | Col2
-------------
Data5 | Data6
Is there a way to also repeat the table caption after the page break? I would think you could do something like caption { display: table-caption-group; }, but this doesn't exist. The solution would need to work in IE9.
I’m afraid there is no way to achieve that. In principle, you can set caption { display: table-caption-group; }, but by the specs, “If a table contains multiple elements with 'display: table-header-group', only the first is rendered as a header; the others are treated as if they had 'display: table-row-group'.” So you would not be able to make both the thead and the caption repeat. Besides, IE 9 does not get even let you repeat caption alone (Firefox does).
The workaround is to turn the caption element to a table row that is part of the thead element. E.g., for a two-column table:
<table>
<thead>
<tr><th colspan=2>Caption
<tr><th>Header cell <th>Another header cell
</thead>
Related
I want my data to have an html that is rendered something like (imagine the headers are aligned above the values)
header1 header2 header3
List item 1
value111 value112 value113
value121 valueb122 valueb123
List item 2
value211 value212 value213
value221 valueb222 valueb223
I want the values to be part of the list block, so I can show/hide the content (collapse) on click. Further, I want the width of each 'column' to be dynamically decided, to accommodate the longest value (perhaps with a min width)
Unfortunately, the HTML table model is so simple that it does not let you enter headers for row groups, which seems to be what the list items would need to be, more or less. We need to fake a little: we form row groups with the tbody element and use the first row in a group as a group header. That row will contain the header in one cell that spans all columns.
The following example has minimal styling and one (rather clumsy) way of making the row group headers controls that can be used so switch off and on the display of data rows in the group. This is just a demonstration to show that such things are doable without mixing list markup with table markup (and, for that matter, without using list markup at all).
function toggleData(el) {
el.parentNode.parentNode.className =
el.parentNode.parentNode.className ? '' : 'hide';
}
tbody > tr:first-child > td:before {
content: '\2022';
padding-right: 0.25em;
}
tbody.hide > tr:not(:first-child) {
display: none;
}
<table border cellspacing=0>
<thead>
<tr><th>header1 <th>header2 <th>header3
</thead>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 1
<tr><td>value111 <td>value112 <td>value113
<tr><td>value121 <td>valueb122 <td>valueb123
</tbody>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 2
<tr><td>value211 <td>value212 <td>value213
<tr><td>value221 <td>valueb222 <td>valueb223
</tbody>
</tabe>
I couldn't find any answers on Google and Stack Overflow on how to fit text into a table so that the words go to the next line. The only solutions I found that were almost helpful were "making table cells fixed, but the text still runs off the page".
When the text is short:
http://puu.sh/d4IQ2/7a7c95512c.jpg
When the text is too long:
http://puu.sh/d4ITM/6edb003a7c.jpg
How do I make it so that the spaces in the table are fixed based on the window size, then have the text that is too long increase the height of the table row and go onto the next line.
For example, my table is like this:
+------+-----+-----+--------+
| 12345|12345|12345| 12345 |
|------+-----+-----+--------|
| 12345| 123 | 1 | 123 |
|------+-----+-----+--------|
|123456|12345| 123 |12345678|
|------+-----+-----+--------|
| 12345| 123 |12345| 1234 |
+-----+-----+-----+---------+
when I want it like this:
+-----+-----+-----+-----+
|12345|12345|12345|12345|
|-----+-----+-----+-----|
|12345| 123 | 1 | 123 |
|-----+-----+-----+-----|
|12345|12345| 123 |12345|
| 6 | | | 678 |
|-----+-----+-----+-----|
|12345| 123 |12345| 1234|
+-----+-----+-----+-----+
style.css:
table, th{
border: 1px solid black;
border-collapse: collapse;
}
th {
table-layout:fixed
padding: 15px;
}
The PHP code is too long, and I don't want to list out all the functions, the rows and text in the cells are looped where I get data from SQL database:
<table style = "width = 100%">
<tr>
<th> looped text </th>
</tr>
</table>
Set the td size equally for each td tag
<td width="25%">Name</td>
Give the columns a specified width in the CSS. This should do the trick.
add this in css file
td {
width : 300px !important;
}
Apply table-layout:fixed to the table element (not the th), and add word-wrap:break-word to the th/td's.
http://jsfiddle.net/5rz1fmvk/
Well,i think a solution is to set a max-width style for your table.In this way the table width won't exceed the given max-width,and the only thing that remains for the value is to go beneath.
<table style="max-width: 500px; width: 500px;">
</table>
Also,specify a width.
Of course the style should be in an extern css file,but you get the idea.Hope it helps.
table{
width: 500px;
max-width:500px
}
try to fixed witdh of th and for td put css word-wrap: break-word; sample below. You can change the width of th.
table{
width:100%:
}
th{
width:30%;
}
td{
word-wrap: break-word;
}
I am implementing a unordered list (<ul><li>...</li></ul>) inside which to display a link (<a>...</a>). In this link tag, other than a title text, I have to conditionally * display an image and a short text.
The "complete" output is something as-like the following:
<ul>
<li>
+------------------------+
| +---+ Title |
| | | |
| +---+ Some short text |
+------------------------+
</li>
</ul>
However, since the above output is conditionally built, it could be that the image or the short text is not displayed. So...
... if the image is not present but the short text is, then the output should be something like
+------------------------+
| Title |
| |
| Some short text |
+------------------------+
... if the short text is not present but the image is, then the output should be something like
+------------------------+
| +---+ Title |
| | | |
| +---+ |
+------------------------+
... if both image and short text are not present, then the output should be something like
+------------------------+
| Title |
+------------------------+
I would like to "play" on HTML-CSS tags-properties and not "directly" on the code "behind" / "that generates" that output. How can I make that?
Note I: "Basic" structures for each scenario at jsfiddle.net/zF5Cw/2.
Note II: For instance, I have problems:
on properly outputting the height of li tags when the image is not present: visually, each li tag (and the related image) is almost overrode by the previous one;
on properly outputting the padding-left of "Title" and "Some short text" when the image is present and not present;
...
* Behind the scenes I have a JavaScript code that conditionally adds HTML to the outputting code:
var html;
html = "<a>";
if ( image ) {
html += "<img>...</img>"
}
if ( short_text ) {
html += "Some short text"
}
html += "</a>";
return html;
This example covers all four of the scenarios you described. Live demo: http://jsfiddle.net/zF5Cw/3/
li {
padding: 10px;
border: 1px solid #000;
margin: 10px;
overflow: auto;
width: 300px;
}
img,span{float: left;}
img{margin-right: 10px;}
span{width: 250px;}
CSS does not contain conditional logic that can change your mark-up. You need to use JavaScript to do this.
Suppose I have the following table:
+----------+
| A | B |
+----------+
| 1 | 2 |
+----------+
I want to make so that when I hover over A that 1 gets certain css styles, ditto for B and 2. Is there a way to do this without using js?
Here's a fiddle to see what I mean
With this markup and pure CSS it's not possible because you would need to use td:hover to apply the CSS rule on mouseover, and there is no selector that lets you travel up the DOM tree (which would be necessary as you want to target cells that live in a different branch from the one being hovered).
If you can modify then a solution such as Dustin's can work; if you can use JS then it's also a matter of sprinkling a little jQuery on the table:
$("td").on("mouseenter mouseout", function() {
var $this = $(this);
$this.closest("table").find("td:nth-child(" + ($this.index() + 1) + ")")
.toggleClass("hover");
});
If you can change the markup, here's a response jsfiddle to do this with CSS.
http://jsfiddle.net/dBrd2/
Edit: Ah, but I see you replied to my comment and said you didn't want to. Anyways, just an idea if you reconsider.
you can create a class called .hover, and do like this for adding the style to all the td's with the same class
$("td.fir").bind("mouseenter", function(){
$(".fir").addClass("hover");
});
$("td.fir").bind("mouseleave", function(){
$(".fir").removeClass("hover");
});
Hi you can do as like this
Css
td {
position: relative;
border: 1px solid black;
padding: 50px;
}
tr .fir{
background:red;
}
table:hover .fir{
background:green;
}
HTML
<table>
<tr>
<td class="fir">a</td>
<td class="sec">b</td>
</tr>
<tr>
<td class="fir">1</td>
<td class="sec">2</td>
</tr>
</table>
Live Demo here http://jsfiddle.net/rohitazad/en5rB/3/
Terr!
HTML::Table has pretty good flexibility to form HTML-tables from perl data structures, but i did not found proper way how to have th-tags different than ordinary cells (td) in same column. Or let me rephrase: if i set column class, i'd like to set it only for data rows, not for header row.
use strict;
use warnings;
use HTML::Table;
my $table = new HTML::Table(
-head=> ['one', 'two', 'eleven'],
-data=> [ ['yki', 'kaki', 'kommi'],
['yy', 'kaa', 'koo'] ]
);
$table->setColClass(1, 'class');
$table->setSectionColClass('tbody', 0, 2, 'class2');
print $table;
And output is:
<table>
<tbody>
<tr><th class="class">one</th><th class="class2">two</th><th>eleven</th></tr>
<tr><td class="class">yki</td><td class="class2">kaki</td><td>kommi</td></tr>
<tr><td class="class">yy</td><td class="class2">kaa</td><td>koo</td></tr>
</tbody>
</table>
Output i am looking for:
<table>
<tbody>
<tr><th>one</th><th>two</th><th>eleven</th></tr>
<tr><td class="class">yki</td><td class="class2">kaki</td><td>kommi</td></tr>
<tr><td class="class">yy</td><td class="class2">kaa</td><td>koo</td></tr>
</tbody>
</table>
There are section level methods, but th belongs also in tbody. Tables may be pretty complex, so i'd like to avoid iterating over the heading row and hope to find a decent way. Is there?
Might be easies to just tweak your CSS a bit. Presumably you have something like this in your stylesheet:
.class { /* Some pretty stuff */ }
So just change the selector to adjust how the header and body cells are styled:
td.class { /* The styles you want applied to body cells go here. */ }
th.class { /* And the styles for header cells (if any) go here. */ }
If you don't want any styling applied to the header cells then include the td.class { } bit in your stylesheet and leave the th.class { } out; there's nothing wrong with having a CSS class attached to an element that doesn't match anything in your stylesheets.