I have a CSS that looks like this:
CSS
table {
width: 100%;
font-family: calibri;
word-wrap:break-word;
margin-left: 0;
font-size: 1.1em;
border-collapse: separate;
border-spacing: 1px;
}
td {
text-transform: none;
font-weight: bold;
line-height: 115%;
word-wrap:break-word;
vertical-align: middle;
padding: 2px 10px 0 3px ;
border-radius: 2px;
border: 1px solid #6A797F;
}
tr:nth-child(odd){
background-color: #a9c6c9;
}
tr:nth-child(even){
background-color: #d4e3e5;
}
How can I add a separate <table>, <td> & <tr> somewhere down the CSS file where by I can change the styles to fit the purpose of the design of that specific page. I tried to this solution but it didn't work:
.members_col1 tr td{
text-transform: none;
line-height: 115%;
word-wrap: break-word;
vertical-align: left;
}
.member_col1 is the <div> containing the <table> I want to add a new set of styles to.
Use the attribute id or class in your table, then cover them as selectors in the css, for example:
<table id="another-table">...
css
#another-table{
....
}
or
<table class="tables">...
<table class="tables">...
css
.tables{
...
}
use this in your html:
<table class="newTable">
...
</table>
and use this CSS:
.newTable tr td{
text-transform: none !important;
line-height: 115% !important;
word-wrap:break-word !important;
vertical-align: left !important;
}
Related
I really need some help with CSS.
I'm trying to style a table and I'm having difficulties adding borders.
Here's the table style I'm going for (Photoshopped): https://ibb.co/hFkCkDg
Adding a border around the table is simple:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
Screenshot: https://ibb.co/Fs6qsNv
To add the separating lines inside the table I need to add a top or bottom border to the rows in the table. Rows are tr elements. By default a tr element of a table does not accept borders. So in order to overcome this I added {border-collapse: collapse !important;} to the whole table which allowed me to add borders to rows, but it messed up the border around the whole table. Screenshot: https://ibb.co/Vgfq9jp
Because of {border-collapse: collapse !important;}, the properties border, padding, border-radius don't work for the table.
Which means I can either add a border around the whole table or add the separating lines, but not both.
How can I achieve the look I'm going for?
I'd go using flexbox, and setting flex: 1 or flex-grow: 1 to the first child of each "row":
* {margin:0; box-sizing: border-box;}
body {font: 16px/1.4 'Varela Round', sans-serif; padding: 20px;} /* DEMO ONLY */
/*
Order
*/
.Order {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px 25px
}
.Order-price {
display: flex;
border-bottom: 1px solid #ddd;
}
.Order-price > * {
padding: 10px 0;
}
.Order-price > *:first-child{
flex: 1;
}
.Order-price:last-child {
border-bottom: none;
}
.Order-price--sub {
font-size: 1.2em;
font-weight: 500;
}
.Order-price--tot {
font-size: 1.4em;
font-weight: 700;
}
/*
Colors
*/
.color-lighter {
color: #999;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div class="Order">
<div class="Order-price">
<span class="color-lighter">Custom Tatoo Design - Small × 1</span>
<span><s class="color-lighter">$99.00</s> <b>$80.00</b></span>
</div>
<div class="Order-price Order-price--sub">
<span>Subtotal</span>
<span>$80.00</span>
</div>
<div class="Order-price Order-price--tot">
<span>Total</span>
<span><small>USD</small> $80.00</span>
</div>
</div>
working with table border is boring, my suggestion is to use the border in td/th elements.
I created this table without style, only solving the problem of borders
.table-class {
border: 1px solid #dddddd;
border-radius: 6px;
padding: 30px;
border-spacing: unset;
font-family: sans-serif;
font-size: 1.5em;
}
.table-class thead th {
border-bottom: 1px solid #dddddd;
text-align: left;
}
.table-class tbody td {
border-bottom: 1px solid #dddddd;
}
.table-class td:last-child, .table-class th:last-child {
text-align: right;
}
.table-class th, .table-class td{
padding: 10px;
}
<table class="table-class">
<thead>
<tr>
<th>Custom Tattoo Desing - Small x 1</th>
<th>
<span><s>$99.00</s></span>
<span>$80.00</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtotal</td>
<td>$80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>USD $80.00</td>
</tr>
</tfoot>
</table>
I'm using WickedPDF to convert HTML to PDF and for some reason, even though I thought I had the proper HTML code, my tables still seem to be breaking onto the next page. Mind you, the information that starts in the <td> is actually a nested table, so I'm not sure if this has anything to do with it.
Here's what it looks like in the report:
Here's my CSS code that I'm working with:
<style>
p, ul {
color: #545658;
font-size: 12pt;
font-family: "Arial";
font-weight: 500;
}
* {
font-family: "Arial";
}
h1 {
color: #ED1C24;
font-weight: normal;
font-family: "Arial";
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: black;
color: white;
}
td {
color: #545658;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
}
table.bordered {
border-collapse: collapse;
}
table.bordered td {
border: 1px solid black;
}
table.bordered tr:first-child td {
border-top: 0;
}
table.bordered tr td:first-child {
border-left: 0;
}
table.bordered tr:last-child td {
border-bottom: 0;
}
table.bordered tr td:last-child {
border-right: 0;
}
tr.bordered:nth-child(even) {background-color: #f2f2f2}
img.finding {
position:absolute;
width:60%;
height: 40px;
margin-left: -20px;
max-width: 100%;
z-index:-1;
}
p.finding {
display: inline;
color: white;
font-weight: bold;
font-size: 16pt;
line-height: 1.75em;
}
code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 5px;
font-family: "Courier";
font-size: 9.5pt;
color: black;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-break: break-all;
}
table { page-break-inside: auto; width: 100%;}
thead { display: table-row-group; }
tr { page-break-inside: auto; }
</style>
What am I doing wrong that's causing my table to not start until the next page just because its contents is too large for the remainder of the previous page? I thought my tr { page-break-inside: auto; } line would have taken care of this. Is it because I have a nested table perhaps?
This ONLY happens on nested HTML tables. Normal HTML tables start on the same page no matter the length of the content.
Here's an example HTML table:
<html>
<body >
<table border=5 bordercolor=red>
<tr>
<td>
Fisrt Column of Outer Table
</td>
<td>
<table border=5 bordercolor=green>
<tr>
<td>
[lots of data right here]
</td>
</tr>
<tr>
<td>
[lots of data right here]
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Here's the table in my html file. I have to highlight a row on click.
<tbody>
<!--display none-->
<!--onclick-->
<tr ng-repeat="case in lastten" ng-click="setSelected(case.Name)" ng-class="{selected: case.Name === idSelected}">
<td colspan="1">{{case.Name}}</td>
<td colspan="1">{{case.total}}</td>
<td colspan="1">{{case.passed}}</td>
<td colspan="1">{{case.failed}}</td>
</tr>
</tbody>
css- initialTable is the class for the above table
table.InitialTable {
table-layout: fixed;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
margin-top: 20px;
margin-bottom: 20px;
border-collapse: collapse;
border-spacing: 0;
}
table.InitialTable td,
th {
border: 1px solid transparent;
height: 40px;
transition: all 0.3s;
overflow: hidden;
}
table.InitialTable th {
font-weight: bold;
text-align: center;
vertical-align: middle;
}
table.InitialTable td {
text-align: center;
vertical-align: middle;
}
table.InitialTable tr:nth-child(even) {
background: #f3f7fb;
}
table.InitialTable tr:nth-child(odd) {
background: #ffffff;
}
.InitialTable tr:hover td {
background: #eee;
}
.selected {
background: red;
}
Here's the angular code-
$scope.idSelected = null;
$scope.setSelected = function(idSelected) {
$scope.idSelected = idSelected;
};
So basically whenever a row is selected it gets the class selected and it should be highlighted. But the css is not working. So is the precedence of .selected below the hover ? I also tried a lot of other combinations , but it didn't work. Even important isn't working . I've been stuck at this for quite a while now .
So today im trying to take items and subitems from a listview and put it in my html template. i can see how this is hard to understand so im going to be showing u what i mean.
This is the Source code for the HTML File
body {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
color: #666666;
background-color: #333333;
margin: 0px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #f1f1f1;
}
tr.h th {
background-color: #333333;
border: none;
}
th {
color: #ffffff;
background-color: #00E5EE;
border: 1px solid #00E5EE;
padding: 3px;
vertical-align: top;
text-align: left;
}
td {
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
pre {
font-size: 13px;
font-family: verdana, helvetica, arial, sans-serif;
padding: 0px;
margin: 0px;
font-weight: normal;
white-space: pre-wrap;
word-wrap: break-word;
}
<body>
<div class="center" style="margin:auto;width:80%;">
<table>
<tr class="h">
<th>
<h2>Stats... </h2>
</th>
<th></th>
<th></th>
</tr>
<tr>
<th>name</th>
<th>age</th>
<th>gander</th>
</tr>
<pre><tr><td>Quan</td><td>12</td><td>male</td></tr></pre>
<pre><tr><td>sam</td><td>14</td><td>male</td></tr></pre>
</table>
<p><small>lit stuff right here </small></p>
</div>
</body>
So now to tell you what i want happening, i want when i click the button that says "Turn to html" that i show in the form photo, to convert the items and subitems into the html layout that i also show in the second photo.
i hope this is enough information.
I have a css which works perfectly:
.border
{
border: 1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.clean
{
border: none;
font-size: 14px;
}
No problem. But to create a table with border I will have to do:
<table class="border">
<tr>
<td class="border"></td>
<td class="border"></td>
</tr>
I find this brutally tedious. Isn't there a way to go:
<table class="border">
<tr><td></td><td></td></tr>
with the same result as the above?
I want an "excel-like" square grid, not only a border around the table (second example).
Pls help.
Yes there is:
.border { /* matches all element with that class */
border-collapse: collapse; /* excel like (collapse cells border together) */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.border td { /* matches all td which have "border" in a parent class element */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
`
You don't need to apply the class inside all your tds. Just use like this:
table.border,table.border td{//Applying border in table html
border: 1px solid black;
}