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
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 have two tr classes.
The view is:
I defined my css but seems I can not align it to make space between headlines equal.
I dont want do change my view with additional tags, just want to edit my existing tr's and td's.
My css:
td.style36 {
vertical-align: center;
text-align: center;
border-bottom: none #000000;
border-top: none #000000;
border-left: none #000000;
border-right: none #000000;
font-weight: bold;
color: #FFFFFF;
font-family: 'Trebuchet MS';
font-size: 10pt;
background-color: #3B4E87;
}
td.style62 {
border-bottom: 1px solid #C0C0C0 !important;
border-top: none #000000;
border-left: none #000000;
border-right: none #000000;
color: #000000;
font-family: 'Trebuchet MS';
font-size: 10pt;
background-color: white;
text-align: center;
}
And HTML:
<tr class="row17">
<td class="column5 style36 s">DATE</td>
<td class="column5 style36 s">TYPE</td>
</tr>
<tr class="row18">
<td class="column0 style62 n">18/Dec/2019 16:12:52</td>
<td class="column1 style62 null">credit</td>
...
</tr>
This question already has answers here:
Chrome render bug with border-collapse
(1 answer)
Chrome bug with colspan and border?
(2 answers)
Closed 3 years ago.
What I'm basically doing is to reproduce a pre-formatted table in HTML/CSS. However, it's displayed differently in different browsers.
Firefox and IE shows it as it's intended. Chrome, however, draws a bogus line that's not there even by inspecting the HTML. In the original file, Chromium Embedded (CEF1) has additional differences.
I made a snippet to demonstrate the problem:
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
So the question is: Is there a problem with the above CSS, or anything that should be used in a different way? I doubt such a basic thing could be a Chrome bug. Still, I don't want that line below cell "B".
Browsers have some leverage in how they interpret things, and Chrome can be ...different... and intractable sometimes.
In any case, I don't think you can reset the border color or size (it ignores transparent and 0), but you can override it with a color that will blend into your background. Removing border-collapse may work, but seems like the opposite of what you really want.
As a bonus, putting the border on all sides corrects a jog downward that Chrome was giving 'B' because it lacked a border. (Other browsers didn't do this.)
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: 1px solid white;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
The border-collapse was causing the issue in Chrome. Not sure if needed?
https://jsfiddle.net/mayjr9dL/
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
You just need to remove border-collapse:collapse to remove underline from cell "B".
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
I think this is happening because of your border-collapse property. If you remove it you will see the line vanishes from underneath the B. Sometimes browsers interpret CSS properties differently because there is no set rules. You can try out websites like caniuse to find out the difference in CSS properties or Pleeease, which is a Node.js application that easily processes your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintainability.
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;
}
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