Why are the boarders showing differently on a table?
Originally I had <div class="tr"> and things like that because the main body of my site is in flex inside #media screen. This specific portion of my site is on #media print
Here is my code for it:
HTML
<table>
<tr>
<th>Drug Names</th>
<th>Prescriber</th>
<th>Dose/Pill</th>
<th>Frequency</th>
<th>Rx Number</th>
<th>Pharmacy</th>
<th class="tinyBoxes">M</th>
<th class="tinyBoxes">T</th>
<th class="tinyBoxes">W</th>
<th class="tinyBoxes">T</th>
<th class="tinyBoxes">F</th>
<th class="tinyBoxes">S</th>
<th class="tinyBoxes">S</th>
<th>Remaining
</tr>
</table>
CSS
table {
display: table;
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
tr {
display: table-row;
border: 1px solid black;
border: 1px solid black;
border-collapse: collapse;
}
th {
display: table-cell;
font-weight: bold;
border: 1px solid black;
border-collapse: collapse;
height: 50px;
vertical-align: middle;
}
td {
display: table-cell;
border: 1px solid black;
border-collapse: collapse;
vertical-align: middle;
text-align: center;
}
.tinyBoxes {
width: 0.5cm;
height: 0.5cm;
display: table-cell;
font-weight: bold;
border: 1px solid black;
border-collapse: collapse;
vertical-align: middle;
}
An Image of what it's displaying on Chrome (most current version): Image of table
Any ideas why the borders are being different?
ADDITIONAL INFO
I did a JSFiddle and it seems to work just fine on there. I guess it's a browser thing...?
Remove
border: 1px solid black;
from 'table', 'tr' tags and '.tinyBoxes' class in your CSS code, and just write it in the 'th' tag, then it's OK.
Related
I've been looking online and haven't found anything that can help with making a table like this one.
already tried using colspan, but it didn't work as I'd hoped.
anyone's got any other ideas?
EDIT:
tried this
table, td, th {
border: 1px solid black;
border-collapse: collapse;
width: auto;
}
th { /* text */
padding: 0px;
margin: 0px;
}
td { /* pictures */
padding: 5px;
text-align: left;
}
<table style="width:100%">
<tr>
<td>Month</td>
<td colspan="2">Savings</td>
</tr>
<tr>
<td colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td colspan="2">$50</td>
</tr>
</table>
Add "table-layout: fixed" to your css as shown below:
table, td, th {
border: 1px solid black;
border-collapse: collapse;
width: auto;
table-layout: fixed;
}
th { /* text */
padding: 0px;
margin: 0px;
}
td { /* pictures */
padding: 5px;
text-align: left;
}
to get
Use CSS grid:
.box {
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box div:nth-child(4n + 1),
.box div:nth-child(4n + 4) {
grid-column: span 2;
}
.box div {
outline: 1px solid;
padding: 5px;
}
<div class="box">
<div>Month</div>
<div>Savings</div>
<div>January</div>
<div>$100</div>
<div>February</div>
<div>$50</div>
</div>
I have 4 different tables in my div container. I have trouble fitting my last table on the page. In my last table there is only one table cell. The height on this td cell is set to 200px. I'm wondering if I can set page-break on my last table. Here is example of my table:
<table class="srTable">
<thead>
<tr>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td id="summary"></td>
</tr>
</tbody>
</table>
Here is my CSS:
table.srTable {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.srTable th {
text-align: center;
border: 1px solid black;
background-color: #E0DBDD;
}
table.srTable td {
height: 180px;
text-align: left;
vertical-align: top;
}
#media print {
table.srTable { page-break-after:auto }
table.srTable tr { page-break-inside:avoid; page-break-after:auto }
table.srTable td { page-break-inside:avoid; page-break-after:auto }
}
If content in srTable can't fit on the page I would like to see entier table on the next page. Code above didn't work, table stayed on the first page and I couldn't see bottom border of my td cell.
You can use a much simpler solution. You only have to set page-break-inside: avoid; on the table.srTable. The other rules for <tr> or <td> aren't needed:
table.srTable {
margin: 5px 0;
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
table.srTable th {
text-align: center;
border: 1px solid black;
background-color: #E0DBDD;
}
table.srTable td {
height: 180px;
text-align: left;
vertical-align: top;
}
div {
height:98vh;
}
#media print {
table.srTable {
page-break-inside: avoid;
}
}
<div></div>
<table class="srTable">
<thead>
<tr>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td id="summary"></td>
</tr>
</tbody>
</table>
I have a table with multiple <a> elements within:
.TableClass td {
background-color: #050;
height: 150px;
}
.TableClass a {
background-color: #f00;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
Fiddle: https://jsfiddle.net/p937jbee/1/
Is there a way to avoid double borders?
UPDATE:
I can't change the HTML code and there are multiple <td> instead of 2 of my example.
Here is a solution for multiple cells:
You need to zero out the left border for all cells except first one
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
Have a look at snippet
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/54o0efuv/
Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE
a.one{
border-left: 0px;
}
html:
<a class="one" href="#"></a>
Seefiddle
Add CSS
.TableClass td:nth-child(2) a {
border-left:none;
}
This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.TableClass td:first-child a {
border-right: 2px solid #000000;
}
.TableClass td:last-child a {
border-left: 2px solid #000000;
}
For a more consistant build-up I suggest to leave the right border, except for the last td. In case you'd like to add more blocks.
CSS
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass td a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
border-right: 0;
}
.TableClass td:last-of-type a {
border-right: 5px solid #000000;
}
border-collapse: collapse;
use this css
The border-collapse property is for use on elements (or elements made to behave like a table through display: table or display: inline-table).
The most straightforward method is to assign border-collapse:collapse to the table and to move the border property from the a elements to the tds. That is all you need to change.
.TableClass table {
border-collapse: collapse; /* new */
}
.TableClass td {
background-color: #005500;
height: 150px;
border: 5px solid #000000; /* moved */
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
.elem1{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
.elem2{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td>
</td>
<td>
</td>
</table>
</div>
here is an updated fiddle, hopefully with be a solution for you
Quick answer:
You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )
HTML
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSS
.table a {
background: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.table td:nth-of-type(odd) a {
border-right: 2px solid black;
}
.table td:nth-of-type(even) a {
border-left: 2px solid black;
}
https://jsfiddle.net/6bgbmde5/
or you can use the background of the tr
.table tr {
display: block;
background: black;
padding: 4px;
}
.table a {
background: red;
width: 100px;
height: 100px;
display: block;
}
.table td:not(:last-of-type) a {
margin-right: 4px;
}
There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!
Since OP has stated that they can-not change the HTML a hacky CSS solution must be implemented. Therefor I will use negative margins which many of you frown upon but I don't see any other options available.
Use the following CSS:
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
margin-left:-5px;
}
.TableClass td:nth-child(1) a {
margin-left:0px;
}
I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
HTML:
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
CSS:
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
table th, table td {
border-top: 1px solid #333;
}
JSfiddle:
http://jsfiddle.net/ajcfrz1g/14/
DEMO
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
white-space: nowrap;
overflow: hidden;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
This question already has answers here:
How do I remove the double border on this table?
(4 answers)
Closed 8 years ago.
(EDIT: Solved. I was on the right track with the border-collapse, but I had to use ctrl+f5 to see it)
Tried using border-collapse and border-spacing to remove them, but it didn't work.
Code:
<main>
<div class="adminr1">
<section class="adminc1">
<table class="adminResults">
<thead>
<td>cell</td>
<td>cell</td>
</thead>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</section>
</div>
</main>
CSS:
*
{
margin: 0;
padding: 0;
font-size: small;
font-family: Roboto;
vertical-align: middle;
text-decoration: none;
}
main
{
font-size: 0;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 86%;
min-width: 1000px;
}
section
{
border: 1px solid #BBB;
background: #FFF;
border-radius: 7px;
display: inline-block;
overflow: hidden;
}
.adminr1
{
display: inline-block;
width: 66%;
height: 700px;
margin-right: 5px;
font-size: 0;
margin-bottom: 10px;
}
.adminc1
{
width: 100%;
height: 100%;
font-size: 0;
}
/*Table Styles:*/
.adminResults
{
width: 100%;
border: 1px solid #000;
}
.adminResults thead
{
border: 1px solid #000;
}
.adminResults tr td
{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
So far, this is the only page I have which uses a table, so I have no table-related styles anywhere else that could be blocking or overwriting the properties I'm trying to add, nor do i have any border-related files on other elements applied generally enough to do the same thing.
I'm obviously missing something, because this seems like it should be a very easy thing to do.
Use border-collapse property to remove spacing between cells
table.adminResults{
border-collapse:collapse;
}
Fiddle Demo
add the border-collapse:collapse; to table.
.adminResults{width:100%;border:1px solid #000;border-collapse: collapse;}
Here is an example:
http://jsfiddle.net/kheema/n4rsy/1/
Did your try to add border="0" cellpadding="0" cellspacing="0" inside table? Like this:
<table class="adminResults" border="0" cellpadding="0" cellspacing="0">
Set border-spacing: 0px; and border-collapsing: seperate; on the Table.
.adminResults {
width: 100%;
border: 1px solid #000;
border-spacing: 0px;;
border-collapse: seperate;
}
Check out this updated: Fiddle Demo