I have a dynamic table with 2px solid border in my web page that sometimes contains lots of rows. I am currently using page-break-before and page-break-after CSS properties.
The CSS code is as per below:
table { page-break-inside:auto }
tr { page-break-inside: avoid; page-break-after:auto }
table.table-bordered{
width: 100%;
border:2px solid black;
margin-top:20px;
border-collapse: collapse;
}
table.table-bordered td{
padding: 6px;
border:2px solid black;
margin-top:20px;
}
The main problem is, it is showing underline when page breaks.
How can I solve this issue?
Thanks in advance.
Related
I am experiencing errors when loading an html/css file. Here are the contents of the file:
<div style="overflow-x:auto;">
<table>
a bunch of tr/td ...
</table>
</div>
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00008B;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
I see two errors: First, the horizontal scrollbar doesn't appear. Second, the even-numbered lines are the same background color as the odd-numbered lines. This behavior is consistent between IE 11 and Chrome 69.
What have I done wrong? How do I fix it?
You need to fix a couple of things:
On the table element, you can try setting it to display:inline-table; so that the width of the table won't be limited by the parent container. Add min-width:100%; if needed, and remove width:100%; to let it grow.
For the alternate background colors, for rows, apply tr:nth-child(even) {...} or tr:nth-child(even) td {...}; for columns, use td:nth-child(even) {...}
If you also have thead and/or tfoot and you only want to apply the colors to tbody, makes use to add tbody tr:nth-child(even) etc.
In addition:
You don't have to use <table>, other options:
Flexbox: .container {display:inline-flex;}
Inline-blocks: .container {white-space:nowrap;} .item {display:inline-block; vertical-align:top; white-space:normal;}
CSS table: .container {display:inline-table;} .item {display:table-cell;}.
Of course, either way you choose, keep the wrapper <div style="overflow-x:auto;"> there as needed.
I have a CSS file with the following:
.mainTable
{
width:100%;
border:solid;
}
.mainTable td
{
border:solid;
text-align:center;
}
In firefox and ie all the td's now have a border and are center aligned. However chrome simply ignores it and the td's are not formatted.
Any clue as to why chrome behaves differently?
You should give the borders a width and a color, this is a much better cross browser solution.
.mainTable
{
width:100%;
border: 1px solid #000;
}
.mainTable td
{
border: 1px solid #000;
text-align:center;
}
The color can be whatever color you want.
You don't see the border in chrome because it has no width.
I'm making use of the table-reflow on my HTML tables. I'm simply looking to put borders around the rows in the table. When I inspected the element via Chrome and see that jQuery Mobile appends the following class to the table:
ui-responsive table-stroke ui-table ui-table-reflow
Thus I looked to add the following style:
.ui-responsive .table-stroke .ui-table .ui-table-reflow tr
{
border-style:solid;
border-width:5px;
}
But some how I still don't get border around the rows, regardless of the screen size. Any ideas how I could achieve this
I assume from your description that you only want borders around the rows at full width and not the individual cells, and then when the table reflows you again want borders around each row (which are actually cells displayed on separate rows).
If so here is a DEMO
In the CSS, the media query is for when the table is viewed on wider screens. In this case we give the TR (rows) a border and set the cell borders to 0. When the screen is narrow and the table reflows, the TR border is 0, and the TD borders are set. You should play with the CSS in the demo to get what you want.
.ui-table tr {
border: 0px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
border: 2px solid rgb(51,51,51);
border-left:4px solid rgb(51,51,51);
border-right:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:first-child, .ui-table-reflow.ui-responsive th:first-child {
border-top:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:last-child, .ui-table-reflow.ui-responsive th:last-child {
border-bottom:4px solid rgb(51,51,51);
}
#media ( min-width: 35em ) {
.ui-table tr {
border: 4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
border: 0;
}
}
I want to CSS a table, but I can't render the line between "tr":
Add this CSS:
td {
border:1px solid #000;
}
Simply add attribute rules="all" to your <table>.
Putting the CSS on the tr element doesn't always work out too well.
You could try something like this if you're going for just row borders:
td {
border-bottom:1px solid #000;
}
just try this
table {
border-left:1px solid #000;
border-bottom:1px solid #000;
}
td {
border-top:1px solid #000;
border-right:1px solid #000;
width:50px;
padding:0 0 0 10px;
}
working demo
I currently have the following table definition:
<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">
I am trying to transform it to CSS, using:
table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}
The table doesn't render as it should, though. What am I doing wrong?
Secondarily, if I want to not apply this styling to one of my tables in specific, how do I do so?
I expect problem is with cellpading and/or cellspacing.
This is not valid CSS:
cellspacing = 0px;cellpadding = 1px
There are already some questions about that :
Set cellpadding and cellspacing in CSS?
Why are cellspacing and cellpadding not CSS styles
I hope this helps you.
Here you are & have a good year!
You need to optimize the tables in css with border, paddings and colors versus cellpadding and default stuff. Code for all tables in your site:
table {
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF;
}
table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}
table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}
table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}
and for tables with no common styling just add the class to the table tag (exapmle1):
table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}
table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}
table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}
table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}
Also you can customize many things with more classes...
table.exapmle1 td {
text-align: center;
}
table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}
table.exapmle1 td.right {
text-align: right;
}
and add class to the td tag for example.
Hope this helps.
It is generally not possible to transform the table-related HTML attributes so that the exact appearance is preserved. The main reason is that the HTML attributes have vague definitions and different interpretations in different browsers, as you can see e.g. by viewing a page with the given attributes on IE and Firefox. It is not possible to replicate this browser-dependence in CSS.
The following stylesheet, which assumes that your markup has <table class=t>, tries to replicate a “typical” or “average” rendering of a table with the given attributes:
table.t {
border-collapse: collapse;
border: outset #CEDFEF 2px;
}
table.t th, table.t td {
border: inset #CEDFEF 2px;
padding: 1px;
}
It’s seldom useful to convert presentational HTML attributes to CSS. When designed new or completely rewritten documents, it is better to start from the desired appearance rather than some existing or hypothetical HTML attributes. For example, solid borders usually look better than the outset or inser borders that <table border> creates, and a padding of 1px is seldom appropriate (usually you want either no padding or a few pixels on left and right, none on top and bottom).
General info: Mapping presentational HTML to CSS. See also subsection Tables in section Rendering of the WHATWG HTML5 draft.
This is the another one way in CSS styling..!!
while styling many tables in html, we can follow this way..!!
Hope it is help full
In Css:
#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}
In Body section, simply we can give the name...!!
<table id="list">