I am fairly new to HTML and CSS so am struggling with a cell spacing problem.
I am trying to stop the cell space when the text ends although all my attempts have not worked and online resources have no either. This is my code:
h1 {
color: blue;
}
table {
border-collapse: collapse;
}
table, th, td {
text-align: left;
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
th {
background-color: skyblue;
}
<h1>Packing Note</h1>
<table style="width:60%" cellspacing="0.2" cellpadding="0.2">
<tr>
<th>Quantity</th>
<th>Item Name</th>
<th>Sent</th>
<th>To Follow</th>
</tr>
<tr>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
</table>
I have tried border-collapse which is suggested online which has not worked. I have also tried padding and width which haven't changed it.
Any help would be appreciated.
style="width:60%" cellspacing="0.2" cellpadding="0.2"
Try to delete this from the table element and it might give you the result you want.
As this line has higher priority than your stylesheet code.
Related
I have wierd problem with my table,
As normal I want borders around my Table Heads and Table Cells,
But for some reason it only gives me a border around the whole table.
How can I fix this?
Images and code attached
How it looks
HTML;
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
CSS;
table, th, td {
background-color: white;
border: solid black 3px;
}
The code you posted in your your question does put borders not only around the whole table, but also around every td and th.
I suppose you might not want the cells to have seperate borders. In this case you should apply the borders only to td and th (i.e. the cells) and in addition apply border-collapse: collapse; to the table itself:
table {
border-collapse: collapse;
}
th,
td {
background-color: white;
border: solid black 3px;
}
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
The best way to approach this is to be careful with which CSS selectors you are using, and not use the table selector as a whole. For help with simple table values and alternatives, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content.
thead { background-color: white; border: solid black 3px; }
th{ background-color: white; border: solid black 3px; }
td{ background-color: white; border: solid black 3px; }
#remi03
can you try these codes
original:
bu kodları bir denermisiniz.
.baslik th{
border: solid maroon 2px;
padding: 0;
}
.icerik td{
border: solid dodgerblue 2px;
padding: 0;
}
<table width='100%'>
<tr class="baslik">
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr class="icerik">
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
div {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td rowspan="2"> <div>four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
The desired result is for the div in the table cell to look more like
this:
Notice the "four" div fills the entire width and height of the table cell in the image but not in the code snippet.
There are questions similar to this that suggest using absolute positioning which doesn't work in this exact situation ( per my attempts ) on a table with unspecified width and height. Other answers say there is no way to do this without JavaScript. But those answers were from 2010. Any input would be much appreciated.
if you are okay with a few classes then you can achieve what you shown in the image.
table,
th,
td,
div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
.spl {
writing-mode: vertical-rl;
border-style: none;
}
.inb {
background-color: #ddd;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td rowspan="2" class="inb">
<div class="spl">four</div>
</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
</tr>
</table>
You could use jQuery as follows to get the (outer) width and height of that parent td and apply it to that div
$(document).ready(function() {
var cellwidth1 = $('.x1').outerWidth();
var cellheight1 = $('.x1').outerHeight();
$('.x2').css({
'height': cellheight1,
'width': cellwidth1
});
});
* {
box-sizing: border-box;
}
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
td.x1 {
padding: 0;
}
div.x2 {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
After trying many things it seems that as of 2020 stretching a div to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.
I am using a table to display data .I am trying to remove space from the left and right of th and td element.
I have tried checking on stack overflow and other places but they all remove vertical spaces between cells. What i want to remove is remove space from left and right.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
This is what i get
table
The red circle is what i want to remove.
The CSS causing the padding is not included in your example. Run this snippet and look at the output. Other CSS you are importing is causing the table width.
In Chrome, right click on one of the table cells and go inspect. Look at the styles in the devtools to see where it is coming from.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
If you use Firefox, use the Inspector. This way you can see which css attribute influences the table elements. For other browsers there should be similar possibilities.
See e.g. for Chrome, Edge
Sorry about the problem you are experiencing but I cant see it from my end. I wrote a new html file and copied your contents without any edits into it like you can see below but the issue was not detected. You too can try out and see for yourself.
#contact_search{
border-collapse: collapse;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006;
line-height: 1;
}
<table id="contact_search" >
<thead>
<tr>
<th>Nametest</th>
<th>Country</th>
<th>City</th>
<th>Category</th>
<th>Work</th>
<th>Mobile</th>
<th>Email</th>
<th>Trades</th>
</tr>
</thead>
<tbody>
<td>John Doe</td>
<td>Australia</td>
<td>Auckland</td>
<td>Corporate Client</td>
<td>3275020</td>
<td>9926104</td>
<td>johndoe#example.com</td>
<td>None</td>
</tbody>
</table>
Possible reasons include:
browser issue (try to use a different browser, clear history on your browser)
you never saved your edits
your css has table attribute already added to it at the top making browser inherit them hence ignoring those for #contact_search
You could try out this for yourself in your css by the way
#contact_search{
border-collapse: collapse!important;
}
#contact_search tr td, #contact_search tr th{
/* text-align: center; */
border: 1px solid #006!important;
line-height: 1!important;
}
please note the keyword !important for css for overriding attributes.
In this fiddle http://jsfiddle.net/jnddfyeq/ I have two tables with border-collapse: collapse. In the first one everything works as expected. In the second one I position the caption with position: absolute and now the borders between the thead and tbody do not collapse.
This happens in Firefox 38 and IE8 (not in a fiddle.) I have not tested other browsers. Is this behavior standard? If so why?
UPDATE: Same thing happens in Safari.
It's not really that the borders don't collapse. It seems that what's happening is that even if the caption is displayed out of the table, there is still an invisible cell being added to the table.
The specification mention that this can happen, it's not exactly clear what should happen in this case, but it's clear that a table follows a pretty strict layout structure and that it will compensate in the background when messing with that layout. See:
Note. Positioning and floating of table cells can cause them not to be
table cells anymore, according to the rules in section 9.7. When
floating is used, the rules on anonymous table objects may cause an
anonymous cell object to be created as well.
Here: http://www.w3.org/TR/CSS2/tables.html#table-layout
If you look at the computed style of your absolute caption you'll see it's not a cell anymore, so it's probably replaced by an anonymous cell. And I guess that since table head are always at the top by definition, this anonymous cell is placed automatically below it, in the table body group. If you set coordinates to 0, you'll see exactly where it ends up. And if you play with borders, you'll see also what happens.
See snippet:
console.log('first caption:', window.getComputedStyle(document.getElementsByTagName('caption')[0]).display, '\nabsolute caption:',
window.getComputedStyle(document.getElementsByTagName('caption')[1]).display)
body
{
margin: 0;
}
table {
border-collapse: collapse;
margin-bottom: 1em;
border-spacing: 12px;
background-color: yellow;
margin-left: 0px;
}
th {
padding: 0.5em;
border: 10px dotted green;
background: #8cf;
}
td {
padding: 0.5em;
border: 15px dotted red;
background: #8cf;
}
caption.abs {
position: absolute;
left: 0;
}
tr
{
background-color: pink;
}
table.realnoncollapse {
border-collapse: separate;
margin-bottom: 1em;
border-spacing: 12px;
background-color: yellow;
}
<table>
<caption>Chill Table</caption>
<thead>
<tr id="tr1">
<th>Chiller</th>
<th>Chillness</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Dude</td>
<td>Way chill</td>
</tr>
<tr>
<td>This Guy</td>
<td>Pretty chill</td>
</tr>
</tbody>
</table>
<table>
<caption class="abs">No chill</caption>
<thead>
<tr >
<th>Chiller</th>
<th>Chillness</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Dude</td>
<td>Way chill</td>
</tr>
<tr>
<td>This Guy</td>
<td>Pretty chill</td>
</tr>
</tbody>
</table>
<table class="realnoncollapse">
<caption class="abs">No chill</caption>
<thead>
<tr >
<th>Chiller</th>
<th>Chillness</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Dude</td>
<td>Way chill</td>
</tr>
<tr>
<td>This Guy</td>
<td>Pretty chill</td>
</tr>
</tbody>
</table>
I have a simple example table with 3 rows and 5 columns styled with a border-collapse: collapse border.
The problem here is that I have a colspan=4 td in the second row, with IE11 (11.0.9600.17691) not showing the right border of that row.
You can see this example here: http://jsfiddle.net/j6u026oz/2/
I've tried putting an extra right border to the tr and th elements but it doesn't work.
Adding an extra th next to the colspan=4 element could solve this issue but I'd prefer to solve this problem with CSS if it's possible, as touching the HTML structure would imply a lot of changes in the project I'm working in.
Thank you!
You could add the extra column by CSS, using ::after pseudo-element:
Updated example
table {
border-collapse: collapse;
border: 1px solid black;
}
tbody > tr:first-child:after {
content: "";
display: table-cell;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">colspan4</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</tbody>
</table>
remove
border-collapse: collapse;
from your css file.
use the code as below
table{
border: 1px solid black;
}
Use "outline" instead of "border".
table{
border-collapse: collapse;
border: 1px solid black;
outline: 1px solid red; /* ---- this lil' guy ---- */
}