How to have tr border-bottom but not td (td without any border)?
I tried the following but td border 0 overrides the tr border too and just thead and th get border!
table.admin_datagrid tbody tr {
border:1px solid red;
}
table.admin_datagrid td{
border: 0;
}
Did u mean border just between the rows and not between cols?
table.admin_datagrid tbody tr {
}
table.admin_datagrid td{
border-left: 0;
border-right: 0;
border-top:1px solid red;
border-bottom:1px solid red;
}
Your issue is not that the td border overrides the tr border, the issue is that you're trying to set border on tr. Instead, try assigning a class on td elements in the row that need to have the bottom border:
HTML:
<table class="admin_datagrid">
<tbody>
<tr>
<td class="border-bottom">
Text1
</td>
</tr>
<tr>
<td>
Text2
</td>
</tr>
</tbody>
</table>
CSS:
table.admin_datagrid td.border-bottom {
border-bottom: 1px solid red !important;
}
table.admin_datagrid td{
border: 0;
}
JSFiddle: http://jsfiddle.net/J7b3M/
Change order and add display:block :
table.admin_datagrid td{
border: 0;
}
table.admin_datagrid tr {
display: block;
border:1px solid red;
}
Fiddle:
http://jsfiddle.net/z5GZN/
Add border-collapse:collapse to your table:
DEMO
table{
border-collapse: collapse;
}
table.admin_datagrid tbody tr {
border: 1px solid red;
}
table.admin_datagrid td{
border: 0;
}
Related
Using only HTML and CSS,
I wish to have a table like the following:
Header1 Header2
-------------- --------------------
L1Col1 content L1Col2 wider content
L2Col1 datum L2Col2 datum2
Where the underline automatically sizes to the
table column width.
Help!
Try this:
CSS:
.sample-table {
width: 50%;
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 1px dashed #000;
}
.sample-table td,
.sample-table th {
padding: 3px;
}
HTML:
<table class="sample-table">
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>L1Col1 content</td>
<td>L1Col2 wider content</td>
</tr>
<tr>
<td>L2Col1 datum</td>
<td>L2Col2 datum2</td>
</tr>
</table>
Azu,
Thanks for your answer.
The "border-spacing" usage was completely enlightening to me.
I modified the CSS to the following:
.sample-table {
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 2px solid #000;
}
.sample-table td,
.sample-table th {
padding: 3px 0px;
}
This gives me exactly what I wanted.
I want to print my page where there's table in it. When i print it it always change to bootstrap default color. I'm using ctrl+p / cmd+p for printing. I'm using bootstrap 4 and laravel 5.7
i've tried to use !important; still not working
My CSS
<style media="screen">
#media print{
.table thead tr td,.table tbody tr td {
border: 1px solid #000000!important;
}
}
</style>
My Table
<table class="col-12 table table-bordered table-sm" >
<thead class="thead-light">
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price (IDR)</th>
<th>Amount (IDR)</th>
</tr>
</thead>
#php
$total=0;
#endphp
#foreach($ra->sale->details as $items)
<tr>
<td>{{ $items->good->name }}</td>
<td>{{ $items->qty }} pcs</td>
<td>{{ number_format($items->units,0,',','.') }}</td>
<td>{{ number_format($items->total,0,',','.') }}</td>
</tr>
#php
$total += $items->total;
#endphp
#endforeach
</table>
This should work for you. This will overwrite the default css.
#media print{
.table thead tr td,.table tbody tr td{
border-width: 1px !important;
border-style: solid !important;
border-color: #000 !important;
}
}
<style media="print">
.table thead tbody tfoot tr td {
border: 1px solid #000000!important;
}
</style>
EDIT 2: (Add .thead-light selector)
<style media="print">
.thead-light {
border: 1px solid #000000!important;
}
</style>
might be able to remove !important if your selector is specific enough:
.table .thead-light {
border: 1px solid #000000;
}
or
.table .thead-light tbody tfoot tr td {
border: 1px solid #000000;
}
Try this in your style tag: this is useful for tables which is having <thead> tags as well.
#media print{
.table thead tr td,.table tbody tr td{
border-width: 1px !important;
border-style: solid !important;
border-color: black !important;
-webkit-print-color-adjust:exact ;
}
.ta thead tr td,.ta tbody tr td{
border-width: 0.7px !important;
border-style: solid !important;
border-color: rgba(0, 0, 0, 0.644) !important;
-webkit-print-color-adjust:exact ;
}
}
If it stills won't work, try it inline:
<table style=" border-width: 1px !important;
border-style: solid !important;
border-color: black !important;
-webkit-print-color-adjust:exact ;
">
</table>
When using the rules attribute on this table element
<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">
I get the following warning:
Attribute (rules) is obsolete. Its use is discouraged in HTML5 documents.
What is the HTML 5 alternative for this?
From here
What does <table rules=""> do?
Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead.
So there is no HTML5 alternative, just CSS alternative:
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 15px;
}
table td {
text-align: center;
}
.frame-box {
border: 1px solid black;
}
.frame-void {
border: none;
}
.rules-none td {
border: none;
}
.rules-all td {
border: 1px solid black;
}
.rules-all td:first-child {
border-left: none;
}
.rules-all td:last-child {
border-right: none;
}
.rules-all tr:first-child td {
border-top: none;
}
.rules-all tr:last-child td {
border-bottom: none;
}
.rules-cols td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.rules-rows td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.border-2,
.border-2 td {
border-width: 2px;
}
"<TABLE BORDER=2 RULES=NONE FRAME=BOX>"
<table class="rules-none border-2 frame-box">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 FRAME=VOID RULES=ALL>"
<table class="border-2 frame-void rules-all">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=COLS FRAME=BOX>"
<table class="border-2 frame-box rules-cols">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=ROWS FRAME=BOX>"
<table class="border-2 frame-box rules-rows">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
HTML 5 demands that you replace the rules attribute with CSS attributes.
Source: https://www.w3schools.com/tags/att_table_rules.asp
Ok, I got these css & it works fine
table td, th{
padding: 5px;
border:0px solid black;
text-align:left;
}
table tr:nth-child(odd) td{
/* background-color: #cce5ff; */
background-color: #F1FCFD;
}
table tr:nth-child(even) td{
/* background-color: #ffccff; */
background-color: #f3f7fb;
}
table tr:nth-child(odd) th{
background-color: #ffcc99;
}
table tr:nth-child(odd) tf{
background-color: none;
}
Now I want to clear the background of td
so I did:
.noBg{
background-color: none;
}
table.rule2 tr:nth-child(odd) td{
background-color: none;
}
table.rule2 tr:nth-child(even) td{
background-color: none;
}
<table>
<tr >
<td colspan="2" class="noBg"><center><input type="submit" value="Login" /></center></td>
</tr>
<tr >
<td colspan="2" class="rule2"><center><input type="submit" value="Login" /></center></td>
</tr>
</table>
But both solutions does not work!
SO, How to overwrite background color of td of table?
I think what you are looking for is the value 'transparent'.
I fixed
table tr:nth-child(odd) td.rule2{
background-color: transparent;
}
table tr:nth-child(even) td.rule2{
background-color: transparent;
}
When nesting multilple spans within each other with a border, by default, their horizontal (top and bottom) borders overlap, and their vertical (left and right) borders stack.
JsFiddle: https://jsfiddle.net/4un9tnxy/
.html:
<span><span>a</span> + <span>b</span></span>
.css:
span { border: 1px solid black; }
You can set display: inline-block; which will make all borders stack.
Is there a way to rig it so that all borders overlap?
I think this may be a better approach for you even though it's not with a span it produces a better result. It doesn't work in jsfiddle for some reason but works in browsers.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</body>
</html>
A border can only be drawn around what a tag contains.
However, you can write additional CSS to remove the boarders of nested spans.
CSS
/*Border for span*/
span {
border: 1px solid black;
}
/*Remove nested span borders*/
span > span {
border-style: none;
}
Result: https://jsfiddle.net/jsallans/4un9tnxy/2/
Add margin-right: -1px; also.
span {
border: 1px solid black;
margin-right: -1px;
}
<span>a <span>b <span>c</span></span></span>
It's kind of ugly code but something like this might help you:
https://jsfiddle.net/4un9tnxy/4/
span {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
span span span:last-child {
border-right: 1px solid black;
}
To reflect what you mentioned in the comment below, here is a slightly more generic version: https://jsfiddle.net/4un9tnxy/6/
span {
border-top: 1px solid black;
}
/* for spans inside of spans */
span span {
border-right: none;
}