I have a table inside some other HTML elements and it renders strange - the border space appears even if I set it in css as collapsed.
The table looks like this:
and the html is this:
<table cellspacing="0" border="1" class="scrollable-headers-only" title="" cellpading="0">
<thead title="">
<tr title="">
<th class="check" title=""></th>
<th class="type" title=""></th>
<th class="name" title="">Name</th>
<th class="address center-column" title="">Address</th>
<th class="domain" title="">Domain</th>
<th class="status" title="">Status</th>
</tr>
</thead>
</table>
and the css, as it appears in FireBug is this:
for the main table:
for each th:
I added border only too see the s[aces between cells. My issue is to eliminate that space. I added cellpading and cellspacing = 0 to the table, but doesn't make difference. I added css to eliminate that space, without any change in rendering.
This table is used as header for another table, and I need to align it's columns to the other one - as you can see from image, there are small lines under the table. I need to align this table with the second one, for this reason is important to get 100% precision.
What's wrong?
Thank you.
I would start with removing display: inline-block; for th and table elements. Firefox treats those as inline elements and inserts extra space. Another way to eliminate it is to set font-size: 0; for table and in example font-size: 12px; for th element.
Related
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
This link is my html's code,I use bootstrap to design my page.
I can't reduce the width of "th" and "td",I tried to use this code style="width:50px" to reduce the width of "th":
<th class="text-center" style="width:50px">JAN</th>
And this code style="width:50px" to reduce "td":
<td class="text-center" style="width:50px">
<input type="text">
</td>
But there is no effect,the "th" and "td" element still very wide,like this picture:
How to reduce the width of "th" and "td"?
The input elements are breaking your table layout.
Set the input elements inside the td as width: 100%
table td input {
width: 100%;
}
See fiddle: https://jsfiddle.net/pfxcswy2/9/
At the top th tag add width='1'
This will make the column width depending on rows content
<th width='1' class="text-center" style="width:50px">JAN</th>
You can try table-condensed class in your table.
The .table-condensed class makes a table more compact by cutting cell padding in half.
<table border="1" class="table table-bordered text-right table-condensed">
<thead>
<tr bgcolor="#337ab7">
<th class="text-center">No</th>
<th class="text-center">JAN</th>
<th class="text-center">name</th>
<th class="text-center">size</th>
<th class="text-center">except</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
This is a quick solution. See if this helps otherwise we will have to write our own css class with higher specificity.
This behavior is due to the bootstrap's styling of th and elements which is given the width of 10%.
.table>thead>tr>th {
width: 10%;
}
All we need to do is use our own style's to override the bootstrap style.
use this code in your external style sheet.It reduces the width to minimum.
Do the same for td's with small modifications according to your need.
CSS code:[ To have the same behaviour through out use below CSS code]
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
width:0% !important;
}
But this change will be overrided everywhere you use table.Better is to give some class name for the particular row you want your new styles on.
HOPE THIS WILL HELP !
I'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range.
I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see.
What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser.
Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell.
Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block.
For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good.
example
<table>
<tr>
<th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
</tr>
</table>
On this page I would like to add a white gap between the background of the "Before" and "After table headings, that aligns with the gap between the photos in each column
I've tried setting the width, max-width and margin-right properties of the "Before" heading and also tried setting the margin-left of the "After" heading, but none of these seem to work.
Thanks,
Don
Easiest way is using colgroup and set a border to act as margin.
<table>
<colgroup />
<colgroup style="border-left:5px solid #fff;" />
See also: http://jsfiddle.net/gwYaQ/
A table is easiest I admit, but it's not really tabular data is it.
You're abusing the table for layout =P
Info about colgroup: http://www.w3schools.com/tags/tag_colgroup.asp
There's a rather dirty way, but does the job:
<tr>
<th>Before</th>
<th style="width: 10px; background: none;"> </th>
<th>After</th>
</tr>
<tr>
<td>IMG1</td>
<td>&nbps;</td>
<td>IMG2</td>
</tr>
I don't think you can achieve that simply changing your CSS.
The white gap between the photo is due to the table cells padding-right (10px), so it's "inside" the cell.
The gradient in the heading being the backgound of the heading cells, a white space between them would have to be "ouside".
On way to fix this would be to add a 10px wide column between the 2 columns. Another is to use colgroup.
But BGerrissen is right : you should not use for that.
th {
padding-left: 50px;
}
td {
padding-left: 50px;
}
I am creating a bunch of tables now as and when I add table header (<th>)table row <tr> and add border to it there are multiple borders coming up. I mean say I have two table headers in a row so each and every th tag will add its own border but I just want want border between the two table header's (th).
<table>
<th>Header1</th>
<th>Header2</th>
<tr><td>Data1</td><td>Data2</td> </tr>
</table>
If you refer the above code and if I add borders to say th tag there will be 2 borders between header1 and header2. I just want 1.
Your problem description is vague (in the future, please come up with an SSCCE, so that everyone can just copy'n'paste'n'run it to see what you exactly mean), but at least, a common solution to this "double border" problem is to add border-collapse: collapse property to the parent table in question:
table {
border-collapse: collapse;
}
Also see this Quirksmode article for several examples.
Set border-collapse:collapse for both table and th in your CSS:
table, th, td { border-collapse:collapse }
If you are guaranteed to have 2 and only 2 th columns, and if I'm reading your question right that you just want a border between the two (i.e. in the middle of the two th tags), then just apply a border-right to the left th:
table
{
border-collapse: collapse;
}
th.leftColumn
{
border-right:1px solid #000;
}
Markup
<table>
<tr>
<th class="leftColumn"> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
It's quick and dirty, but if you know you have only 2 columns it would work. Again this is assuming your question is that you want a border between two th cells, and nowhere else.