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
Related
I am trying to create a CSS table with border all over using the standard method of applying top and left borders to all td elements (apart from those in first column and first row). And then there is a border on the <table>. This method suits my use-case better than one in which we use border-collapse.
But then there is a bug which resembles inner margin on td elements. This margin like space isn't always there but only occurs on some viewports for some reason. Here's my code:
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
.table-container {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 50px;
font-size: 20px;
}
table {
font-size: 15px;
border-spacing: 0;
border: 4px solid black;
border-radius: 35px 35px 0 0;
border-left: none;
border-top: none;
width: 90vw;
background-color: white;
margin-top: 50px;
text-align: center;
}
td {
box-sizing: content-box;
border-left: 4px solid black;
border-top: 4px solid black;
height: 60px;
}
thead td:first-child {
border-top-left-radius: 35px;
}
thead td:last-child {
border-top-right-radius: 33px;
}
thead td {
font-size: 20px;
font-weight: 500;
}
table button {
cursor: pointer;
height: 100%;
border: 0;
background-color: white;
color: #d90429;
}
.progress-bar{
background-color: orange;
}
.progress-bar > div{
background-color: green;
height: 100%;
width: 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar">
<div>50</div>
</td>
<td>
<button type="button">
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
Here's one viewport in which this bug can be seen in action:
I guess running above code snippet and looking at the output in full screen will reproduce this bug
EDIT
As pointed out by KIKOSoftware in comments, the problem seems to be specific to chrome.
My Version of Chrome happens to use 3.991px for border instead of 4px.
on a personal level, having had a thousand problems with borders in HTML tables,
I ended up opting for a radical solution: no border at all!
I use border-collapse: separate; and I play on border-spacing
in addition it lightens the css to write
I recommend it
in your case:
* {
padding : 0;
margin : 0;
}
html, body {
height : 100%;
width : 100%;
background-color: #658d8d; /* this one is mine... */
}
.table-container {
display : flex;
flex-direction : column;
align-items : center;
padding-bottom : 50px;
font-size : 20px;
margin: 1em;
}
table {
font-size : 15px;
border-collapse : separate;
border-spacing : 4px;
background-color : black;
border-radius : 33px 33px 0 0;
width : 90vw;
}
thead td {
font-size : 20px;
font-weight : 500;
}
td {
background-color : white;
height : 60px;
text-align : center;
}
thead td:first-child { border-top-left-radius: 29px; }
thead td:last-child { border-top-right-radius: 29px; }
table button {
cursor : pointer;
height : 100%;
width : 100%;
border : 0;
background-color : white;
color : #d90429;
}
.progress-bar {
background-color: orange;
}
.progress-bar > div {
background-color : green;
height : 100%;
width : 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar"><div>50</div></td>
<td><button type="button">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
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've tried to move the table, but I couldn't do that. I want to move the table that is inside div. But I only can move the table only to the left/right. I want the table to be free. What is my mistake? What I missed? Maybe I did styling wrong? Please help me to solve this problem.
Here is the code:
/*Imports*/
#import url('https://fonts.googleapis.com/css?family=Ubuntu');
body{
background-color: #21ff00;
margin: 0;
padding: 0;
}
.division1 td{
padding: 5px;
border: 2px solid #000;
color: #fff;
}
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
}
.division1 table{
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 35px 28px;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Mirashraf</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="division1">
<table border="1">
<tr>
<td><b>Name</b></td>
<td><b>Price</b></td>
</tr>
<tr>
<td>MacBook</td>
<td>$999.99</td>
</tr>
<tr>
<td>iPhone</td>
<td>$499.99</td>
</tr>
<tr>
<td>iPad Pro</td>
<td>$649.99</td>
</tr>
<tr>
<td>Apple Watch</td>
<td>$1199.99</td>
</tr>
</table>
</div>
</body>
</html>
Please, help me.
Thanks to everyone in behind.
You can set the div to absolute position and place it anywhere you like.
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
position: absolute;
top: 35%;
}
Kindly split margin to 4 parameters as below margin: toppx rightpx bottompx leftpx , Below css will move table to center of the screen
.division1 table {
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 50px 28px 41px 40%;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
If you mean that you want the Table to be centred, you need to set margin-left:auto, margin-right:auto in your CSS for the table. This assumes your table has a width, which it does.
If you mean that you want to drag the table around, then that's a whole different question.
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 have an HTML page in which there is a table which populates data from a database table and I am trying to restrict the size of the table by placing it in a div like in the following
<div id="scrollablebody">
<table class="clientTable">
<thead>
<tr>
<th>Grade</th>
<th>Term</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<!--ko foreach: products-->
<tr>
<td class="clientproductHeader" data-bind="text: $data">
</td>
<td class="clientproductHeader" colspan="13"></td>
</tr>
<tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">
<tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
<!--/ko-->
</table>
</div>
CSS for div
#scrollablebody{height:500px;overflow-y:auto;width:100%;}
But for some reasons the text in tbody is occupying all the space like in the following image
As you can see in the above picture the row with c5+ is unusually occupying lot of space
CSS for the Table
.clientTable {
max-width: 100%;
background-color: grey;
height:75%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 98%;
margin-left:0;
margin-right:100px;
float: left;
overflow:scroll;
}
table.clientTable thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.clientTable td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientTable th {
padding: initial;
line-height: normal;
text-align: center;
width: initial;
height: 20px;
border: 1px outset gray;
background-color: black;
color: white;
cursor: pointer;
}
Change height to max-height. It's going grow to size if you don't specify and have the overflow as auto.