Am trying to use CSS3 to set the cell-spacing and the cell-padding for my table since HTML5 doesn't support these attributes.
I have found many resources on the internet says that you should use border-spacing and padding using CSS.
Unfo. i tried all these tricks , but it seems that no thing changing at all. The spacing is very important because am including image structure on the different cell of the table.
So how i can solve it now ? plz need your help
#SearchTable
{
border-collapse: collapse;
padding:0px 0px 0px 0px;
}
#SearchTable td
{
padding:0;
border-spacing:0px 0px;
}
For cellspacing:
Set border-spacing on the table, not on the td.
Set border-collapse to separate.
#SearchTable {
border-collapse: separate;
border-spacing: 8px;
}
You have not set id=SearchTable on the table, or you have some other stylesheet rules that override those that you specify. As such, the rules you posted are more than sufficient for the effect; you only need
#SearchTable
{
border-collapse: collapse;
}
#SearchTable td
{
padding:0;
}
(which are already in CSS2).
You need to set it like this. It worked for me.
#SearchTable {
border-spacing:2px 2px;
border-collapse:separate;
}
#SearchTable td {
border:1px solid black;
}
Related
I try to remove border from attribute in table but it's not work!
border: none;
border: 0;
please tell me what's I'm wrong? and What should I do?
Thanks.
Picture 1
Picture 2
Try to change your
border-box: 0;
to
border-box: none !important;
!important will override if a part of your css below re-edit your border-box. You probably included your css file before your bootstrap / other css lib
did you use "table-bordered" class in your HTML, if you used this class remove the class and run it
try to add
td {
border: none;
}
Hope it'll work.
This should solve your problem
HTML:
<table border="0"></table>
CSS:
table td,
table th {
border: none;
}
You can follow this may be it helps
<table border="0"></table> // Add border attribute in table
or you can also try with css i.e
table tr td,table{
border:0px;
box-shadow:none;
border-color:transparent;
}
I can't figure it out, why is this table 102px and not 100px in height? Is there another css attribute I need to set otherthan:
table {
border-spacing:0;
border-collapse:collapse;
}
example: https://jsfiddle.net/0enwstw7/2/
There appears to be padding on the <td> tag assigned by default. This should fix it:
td {
padding: 0;
}
The <td> element defaults to having 1px padding, which adds a pixel on each side to make 102px total.
Remove it with td{padding:0;}
It's the padding of the td that adds another 2px;
You have set the up div to be 100px but you are measuring the table.
You can set the padding of the td to 0;
td {
padding: 0px;
}
Try removing implicit td padding which is included into overall size of the table. Sufficed to add some directive like this:
td {
padding: 0;
}
see: https://jsfiddle.net/0enwstw7/3/
Take a look at this.
Your browser (e.g. Chrome) has its own stylesheet and that's why it adds that border-spacing: 2px; to the table.
If you want more information about browser specific stylesheet, take a look at here.
And Yes. Like lots of people here already mentioned it, you can override the setting by adding
td {
padding: 0px;
}
BUT I still think it's important to know WHY this happened.
Hope this helps.
Please forgive my all-encompassing ignorance, but I just can't get my table to look right in my webform.
I declare a table:
<table>
</table>
and it has no border. There is an attribute for border, as such:
<table border="1">
</table>
but asp.net tells me that the border attribute is 'obsolete'.
I try to add it in CSS...
.table{ border: 1px solid black; border-collapse: collapse; }
...but this just puts a border around the whole table, not the individual cells.
All I want is a normal looking table with lines around each cell. What is the proper way to do this?
Use this:
table, table th, table td { border: 1px solid black; border-collapse: collapse; }
(need to apply the border to the table-cells too)
The code above won't work as...
.table{ border: 1px solid black; border-collapse: collapse; }
is looking for a class of "table" and not a table element. Either update the table class to "table"...
<table class="table">
...or change your CSS to find the table element itself.
table{ border: 1px solid black; border-collapse: collapse; }
You will also need to style th and td elements to have the border.
What is the best way to add a border to an html table when I already have a rule in the css
*{border:0;}
If I add style="border:1px;" into the table then I just get a border surrounding the entire table instead of for each cell as well which is what I should have when I use:
<table border="1" cellspacing="0" cellpadding="0">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
Example
You shouldn't use that HTML as it is not valid. use the following CSS:
table {
border: 1px;
border-collapse: collapse;
}
table td, table th {
border: 1px;
padding: 0px;
}
border-collapse on collapse makes the borders of the cells single. That is the equivalent of HTML cellspacing. Make sure you set the border on the table as well as the td and th.
You also need to set borders on cells. Perhaps you should set up a CSS class for this table.
table.bordered
{
border-collapse:collapse;
}
table.bordered > td
{
border: 1px solid black;
}
Then you would use <table class="bordered">
edit: The other answers assume you want this for ALL tables. I see no reason to jump to that conclusion.
I am struggling with a cell padding issue in a given HTML table (generated by Drupal).
The table is the following:
I tried the following:
.view-thumbnails-of-tips-and-tricks {
padding: 10px 10px 10px 10px;
}
I want to adding padding around cell content as following:
Unfortunately, the padding goes around the table, rather than the cells' content. How can I solve this?
.view-thumbnails-of-tips-and-tricks tr td {
padding: 10px;
}
Specify td after your class:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px;
}
Also, make sure to set cellpadding to zero in the HTML in case user-agent stylesheets provide their own value. This value may override or add to the CSS value.
<table cellpadding="0">
You should set css to that cell, not the holder.
So you can set class name for that cell and customize the css.
e.g: .view-thumbnails-of-tips-and-tricks td { padding: 10px; }
Hope this help
Try defining your style like this:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px 10px 10px 10px;
}
It means that you are defining style for:
top div (identifier ".view-thumbnails-of-tips-and-tricks")
table inside that div ("td")