When a submit button is added inside the table, the cell padding gets larger throughout the entire table. The button is at the very top of the cell. I want it to be at the center with less cell padding. Nothing is really working for me...
<html>
<head>
<style type = "text/css">
td {border:1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit"></input></form></td>
</tr>
</table>
</body>
</html>
This is due to the form element having some default margins and padding. You can reset those back to zero by adding the following to your stylesheet:
form {margin: 0; padding:0;}
Then you can style the rest of the table normally. Consider using some sort of CSS reset script, like Eric Meyer's:
http://meyerweb.com/eric/tools/css/reset/
One solution can be :
<html>
<head>
<style type = "text/css">
td {
border:1px solid black;
}
td form {
display : table-cell;
vertical-align: middle;
margin : 0;
padding : 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit" /></form></td>
</tr>
</table>
</body>
</html>
try it :D
you can try this
<td><form><input type = "submit" style="margin:0;"></input></form></td>
Related
There is a table inside a paragraph. The cell inside the table has extra new line. Below is relevant part of the code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page1773023 {}
.f31 {font-family:Times New Roman;font-size:12.00pt;font-style:normal;font-weight:normal;line-height:114%;}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
</style>
</head>
<body>
<div class="Page1773023" style="height:1056px;width:816px;">
<p class="normal"><pre>
<table class="normal" style="width:99.00px;border-spacing:0px;border-collapse:collapse;border:1.00px solid #000000;;">
<tr>
<td style="height:16.000px;width:96.000px;;;" >
<p class="normal"><pre>
<span class="f1" style="color:#FF0000;" >11111</span></pre></p>
</td>
</tr>
</table><br style="clear:left;"/>
</pre></p>
</div>
</body>
</html>
Now when I remove the <pre> tag from outer most <p>, the new lines is not seen. Any ideas why this is happening?
Download HTML Tidy Plugin on firefox and fix the errors...
By the way, I would try to minimize the tags you have used. Why do you need p, span, table, div, pre ?
First decide on what the layout should be and write only the code you really need.
Here is an example of how you could achieve around the same output. Make sure you have firebug or some inspect tools on your browser. It helps you make minor changes to margins and find the correct values.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width:104px;
height:80px;
border:1px solid;
margin-top:10px;
}
.box td {
color: red;
font-family: Arial;
font-size: 10.00pt;
font-style: normal;
font-weight: normal;
line-height: 114%;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
11111
</td>
</tr>
</table>
</body>
</html>
The new line between <pre> and <table> is displayed as it is within a <pre> tag. This could be fixed by placing them on the same line: <pre><table ...>
I need to up text but if i apply class to TD or TR in IE, Opera and Chrome all cell goes up (background and border and text in cell).
Please look example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.myClass td{
position:relative;
top:-8px;
color:blue;
}
.myClass {
position:relative;
top:-8px;
color:blue;
}
td { border: red solid 2px ;}
</style>
</head>
<body>
<p> </p>
<table width="384" height="89" border="2" cellpadding="0" cellspacing="3" bgcolor="#cccccc">
<tr >
<td width="109" bgcolor="#FFCC00"> </td>
<td width="255" bgcolor="#00CCFF" class="myClass">this TD have class=".myClass"</td>
</tr>
<tr class="myClass">
<td bgcolor="#999999"> </td>
<td bgcolor="#FFFF00">this TR have class=".myClass"</td>
</tr>
<tr>
<td bgcolor="#666666"> </td>
<td bgcolor="#FFFFFF"><span class="myClass">this text within span-tags (.myClass)</span></td>
</tr>
</table>
</body>
</html>
Firefox don`t affect if is applied to tr_or_td, affect only to text with span-tag.
Every browsers work correct if in every TD of a row place text within
<span class="tdclass"> mytext in span-tag </span>
QUESTIONS) :
Is there some css structure to assign style only to data within TD but not to this TD
tr.myclass TD {}
in IE, Opera, Chrome applies to all cell, in Firefox don`t work at all.
Is there some css selector of TEXT - I mean for example:
.myclass > b
will be applied when in tag with .myclass we have b-tag
maby some word like EVERY_TEXT - may be such selector, for example:
.myclass > EVERY_TEXT {}
can anybody suggest another workable way to up text in all cells of table without span in every cell, and without .js
Thanks for helping!
Use an asterisk to select all elements in that section of the DOM, e.g.
<div class="one">
testing <br/>
<span> Test </div>
</div>
.one * {
color: red;
}
Fiddle here, if you need to check it
You could add a span tag around the content in the TD cell and apply CSS to the span.
<td>
<span class="styled_cell_content">Content</span>
</td>
Did you try a negative padding?
.myClass,
.myClass td {
color:blue;
padding-top: -8px;
}
If you're still looking for the answer to this, you need to specifically set the border at the td (and th) level - in IE this takes precedence over the color set on the whole element. For example, add this to your css, now IE will use this to style the border and the color set on td won't change it!
td, th {
border: 1px solid #000;
}
I have a table with dynamic data.
Depending on data, it expands or collapses.
I don't want it. I want a fixed width that never expand or collapse.
How can I do that?
I've already tried <table width="300px"></table>,
but it doesn't work.
The following should work:
<table style="width:300px;table-layout:fixed"></table>
You'd set the width of each column explicitly like so:
td.a {
width:100px;
}
td.b {
width:200px;
}
...
<table>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
</table>
Either old ugly way
<table width="300"></table>
or the CSS way
<table style="width:300px"></table>
Of course, the best way is to use a separate stylesheet file, call it for example style.css:
table {
width: 300px;
}
and your html document:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
...
</table>
</body>
</html>
I have a project which requires printing an HTML table with many rows.
My problem is the way the table is printed over multiple page. It will sometimes cut a row in half, making it unreadable because one half is on the bleeding edge of a page and the remainder is printed on the top of the next page.
The only plausible solution I can think of is using stacked DIVs instead of a table and force page-breaks if needed.. but before going through the whole change I thought I could ask here before.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Note: when using the page-break-after:always for the tag it will create a page break after the last bit of the table, creating an entirely blank page at the end every time!
To fix this just change it to page-break-after:auto.
It will break correctly and not create an extra blank page.
<html>
<head>
<style>
#media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
Expanding from Sinan Ünür solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
It seems that page-break-inside:avoid in some browsers is only taken in consideration for block elements, not for cell, table, row neither inline-block.
If you try to display:block the TR tag, and use there page-break-inside:avoid, it works, but messes around with your table layout.
None of the answers here worked for me in Chrome. AAverin on GitHub has created some useful Javascript for this purpose and this worked for me:
Just add the js to your code and add the class 'splitForPrint' to your table and it will neatly split the table into multiple pages and add the table header to each page.
Use these CSS properties:
page-break-after
page-break-before
For instance:
<html>
<head>
<style>
#media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
via
I recently solved this problem with a good solution.
CSS:
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS:
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
Works like a charm!
I ended up following #vicenteherrera's approach, with some tweaks (that are possibly bootstrap 3 specific).
Basically; we can't break trs, or tds because they're not block-level elements. So we embed divs into each, and apply our page-break-* rules against the div. Secondly; we add some padding to the top of each of these divs, to compensate for any styling artifacts.
<style>
#media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
The margin and padding adjustments were necessary to offset some kind of jitter that was being introduced (by my guess - from bootstrap). I'm not sure that I'm presenting any new solution from the other answers to this question, but I figure maybe this will help someone.
I faced the same problem and search everywhere for a solution, at last, I fount something which works for me for every browsers.
html {
height: 0;
}
use this css or Instead of css you can have this javascript
$("html").height(0);
Hope this will work for you as well.
I checked many solutions and anyone wasn't working good.
So I tried a small trick and it works:
tfoot with style:position: fixed; bottom: 0px;
is placed at the bottom of last page, but if footer is too high it is overlapped by content of table.
tfoot with only: display: table-footer-group;
isn't overlapped, but is not on the bottom of last page...
Let's put two tfoot:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>
One reserves place on non-last pages, second puts in your accual footer.
I have a face like this problem. You can solve this problem using CSS properties.
#media print {
table{page-break-after: auto;}
}
Note:
You can not use this property with empty or on absolutely positioned elements.
I've tried all suggestions given above and found simple and working cross browser solution for this issue. There is no styles or page break needed for this solution. For the solution, the format of the table should be like:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Above format tested and working in cross browsers
The accepted answer did not work for me in all browsers, but following css did work for me:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
The html structure was:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
In my case, there were some additional issues with the thead tr, but this resolved the original issue of keeping the table rows from breaking.
Because of the header issues, I ultimately ended up with:
#theTable td *
{
page-break-inside:avoid;
}
This didn't prevent rows from breaking; just each cell's content.
Well Guys... Most of the Solutions up here didn't worked for. So this is how things worked for me..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
The first set of head is used as a dummy one so that there won't be a missing top border in 2nd head(i.e. original head) while page break.
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT
I've updated my example - the problem is that I do not want to take the style off the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.