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;
}
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 need alternative way to make 2 elements (1 align left and 1 align right) in one line. I use display: flex; and display correctly on safari on iOS 9 but it won't display correctly on Safari on iOS 6.
It should look like this (iOS 9)
http://i.stack.imgur.com/SO3RM.jpg
And here is iOS 6
http://i.stack.imgur.com/jHK5l.jpg
My CSS code
.signedlatest {
font-family: "sfns_displayregular";
font-size: 13pt;
font-color: #ffffff;
background: #ffffff;
display: flex;
justify-content: space-between;
margin: 0;
border-top-style: solid;
border-bottom-style: solid;
border-color: gray;
border-width: 0.5px;
line-height: 250%;
padding-left: 0.3cm;
padding-right: 0.3cm;
}
HTML
<div class="signedlatest>
<a>iPhone 6S Plus</a>
<a>iOS 9.3.4</a>
.........
<a>iPhone 4S</a>
<a>iOS 9.3.4</a>
</div>
Try using <table>
table tr td:first-child{
padding-right:20px;
}
table tr{
border-bottom:1px solid black;
}
<table>
<tr>
<td>iPhone 6S Plus</td>
<td>iOS 9.3.4</td>
</tr>
<tr>
<td>iPhone 6S</td>
<td>iOS 9.3.4</td>
</tr>
<tr>
<td>iPhone 5</td>
<td>iOS 9.3.4</td>
</tr>
</table>
You could do something like:
a {
float: left;
width: 50%;
border-bottom: 1px solid #ddd;
}
a:nth-child(2n) {
text-align: right;
}
i created the table with empty span tags with padding giving them a box shadow.
its simple html structure is as follow.
<table>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></td></span>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
</table>
with css code as below..
th {
font-size: 20px;
background-color: #cccccc;
padding: 5px 8px;
}
td {
padding: 5px 5px 10px 5px;
font-size: 18px;
background-color: #ececec;
}
th,td {
border-right: 2px solid #dedcdd;
}
table {
margin-top: 25px;
border: 2px solid #dedcdd;
position: relative;
border-collapse: collapse;
}
.tokenHolder {
background-color: white;
cursor: pointer;
position: relative;
color: transparent;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 2px 2px 2px gray;
border-radius: 2px;
}
the respective js fiddle is at http://jsfiddle.net/Pank/4A9BM/
here in after using border-collapse:collapse at the table removes the box shadow for the span inside it..
otherwise hole code is running fine in all browsers..
Please help for this ie related quirk..
Just add
<!doctype html>
in the top of your HTML document. It will work fine. Tested in IE10
updated answer.
screen shot: When i use
http://www.image-share.com/ijpg-2440-42.html
Screen shot: without using
http://www.image-share.com/ijpg-2440-43.html
http://www.image-share.com/ijpg-2440-44.html
here is the link to it. just read it.
w3schools
I have a table cell with text in it but how can I make the text flush to the top or bottom of the cell (with no padding above it)? I've tried vertical-align, but it's still not quite to the top 'edge'.
My code
<table>
<tr>
<td class="foo">3.2325</td>
<td class="bar">4.5931</td>
</tr>
</table>
table {
border-bottom: 2px solid black;
border-collapse: collapse;
}
table td {
border-top: 1px solid black;
border-collapse: collapse;
background-color: pink;
padding: 0 10px 10px;
}
.foo {
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
}
.bar {
font: normal 16px arial;
}
JSfiddle example: http://jsfiddle.net/KznxN/2/
depending on whether you wish more above or below, you adjust the "line-height" depending
example:
. {foo
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
line-height: 24px;
}
But beware, it would be better fix the height size of your cell
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;
}