I have NO idea why this is giving me such a problem; I've made functioning tables a million times. Trying to make a full-width table.
The first cell should take up whatever space the other two fail to.
The second and third cell should each be 200px.
The goal is to not have a width attributed to the first cell so that it will change size as the window changes size - BUT even if I add a width attribute to all three (as it is in the below CSS), it doesn't space out correctly. It's cramming itself into the far right corner of the table, even though I've marked the table with a width of 100%.
PLEASE HELP!
table.topper-table {
width: 100%;
}
td.topper-table-nav {
width: 65%;
text-align: left;
}
td.topper-table-search {
width: 10%;
text-align: right;
padding-right: 25px;
}
td.topper-table-social {
width: 25%;
text-align: right;
border-left: 1px solid #9db3c4;
padding-left: 25px;
}
<table class="topper-table">
<tr>
<td class="topper-table-nav">
TEST
</td>
<td class="topper-table-search">
TEST 2
</td>
<td class="topper-table-social">
TEST 3
</td>
</tr>
</table>
I think this is the code you're targeting at, which does exactly what you try to achieve, both in Chrome and Firefox. I suppose you already tried something like this (not with the percentages as displayed above). Can you test my code and run it to see how it renders at your computer?
<!DOCTYPE html>
<html>
<head>
<style>
table.topper-table {
width: 100%;
}
td.topper-table-nav {
text-align: left;
background-color: orange;
}
td.topper-table-search {
width: 200px;
text-align: right;
padding-right: 25px;
background-color: red;
}
td.topper-table-social {
width: 200px;
text-align: right;
border-left: 1px solid #9db3c4;
padding-left: 25px;
background-color: lime;
}
</style>
</head>
<body>
<table class="topper-table">
<tr>
<td class="topper-table-nav">TEST 1</td>
<td class="topper-table-search">TEST 2</td>
<td class="topper-table-social">TEST 3</td>
</tr>
</table>
</body>
</html>
Related
Lets say we have this table:
<table>
<tr>
<td width="50px">Text crossing two td´s</td>
<td width="50px"></td>
</tr>
</table>
How can the text be on top of the two td´s and follow the size of the tr?
https://jsfiddle.net/roj7w1t4/
Is it possible?
EDIT
I need the borders to stay visible. Therefore i cannot use colspan!
Is it possible to create a span and put it over the td´s?
To make more sense what i am trying to do.. this is a small example of my application: What printable element is better to use than linear-gradient?
THE ELEMENT
<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div>
The only way I can image doing this is placing an element outside the table and having a container around the table and the element. Then placing the element using position absolute on top of the table.
div {
width: 200px;
position: relative;
}
table {
width: 200px;
}
td {
border: 1px solid red;
height: 40px;
}
span {
position: absolute;
padding: 2px;
z-index: 99;
}
<div>
<span>Lorem ipsum dolor sit amet</span>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
How about changing your html layout? Try to use after pseudo element and position:absolute. This technique saves me in a lot of situation and it's very strong, I think.
div {
border: 1px solid green;
padding: 2px;
position: relative;
width: 150px;
}
div:after {
background: green;
bottom: 0;
content: '';
display: block;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1px;
}
<div>
This text should cross two td´s
</div>
table {
border: 1px solid black;
}
td {
border: 1px solid red;
}
th {
text-align:center;
}
<table>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td width="50px">This text should cross two td´s</td>
<td width="50px"></td>
</tr>
</table>
You can include the border will be visible.
All the best. For any query please comment.
My table cell has fixed width and contains select list and one or two buttons in a row. Select should fill all the space before buttons. I solved this with div wrapper, but my boss doesn't allow me to use any additional divs because from his point of view each element must symbolize some program data. He alsow doesn't allow me to use flexboxes.
Here's the code of how it should look like
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
#wrap {
overflow:hidden;
}
<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
<option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>
Is there a way I can do this without additional elements or non-cross-browser solutions like flexboxes?
Try this option with help of inner table and without any additional wrappers. https://jsfiddle.net/xkLaq47m/
/---CSS---/
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
.inner-table{
margin: 0;
}
.inner-table__button-cell{
min-width: 15px;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
/*---HTML---*/
<table>
<tbody>
<tr>
<td>
<table class="inner-table">
<tbody><tr>
<td>
<select>
<option value="">ttttttttt</option>
</select>
</td>
<td class="inner-table__button-cell">
<button>+</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
I got this code:
<table>
<tr>
<td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
}
td {
padding: 10px;
background-color: gray;
}
I want to set table to 70% of the total window width which I did. I also want the td to be 50% of the 70% inside the table, the td width should be static.
You can see the problem here
The only reason your code wasn't working is due to the giant single string.
Add the below to cause it to break, and keep the correct width:
td {
background-color: #808080;
padding: 10px;
width: 50%;
max-width: 50%; /* to limit the width to 50% as well */
word-break: break-all; /* cause any string that is too long to be broken so will fit */
}
Here's a fiddle for your reference: http://jsfiddle.net/9ftqy/
Set table-layout:fixed; to table and fix your problem
fiddle http://jsfiddle.net/S37BB/
new css
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
table-layout:fixed;
}
td {
padding: 10px;
background-color: gray;
width:50%;
overflow:hidden;
}
html
<table>
<tr>
<td>PeterPeterPeterPeterPete rPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
There are couple of things you should understand from your code...
TD width should always be fixed to 50% --- however normal tendency is re-size the cell per content which resides in it.
table {
table-layout: fixed;
}
td {
width: 50%;
}
You want to force cell content to wrap within provided space and not to overflow once #1 is completed.
td {
word-wrap: break-word;
}
Here is complete code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Table</title>
<STYLE TYPE="text/css">
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
table-layout: fixed;
}
td {
padding: 10px;
background-color: gray;
width: 50%;
word-wrap: break-word;
}
</STYLE>
</head>
<body>
<table>
<tr>
<td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Hope this helps you.
Ashok
I have a html table I am trying to build as formatting for a website banner and menu links. The menu links tags however won't stay at an even size no matter how much size and margin fiddling I do.
<table id="format_table">
<tr>
<th colspan=100>
LOGO
</th>
</tr>
<tr align="center">
<td>Home</td>
<td>Etc</td>
<td>Etc</td>
<td>Etc</td>
</tr>
<tr>
<td>
#RenderBody()
</td>
</tr>
</table>
table
{
background-color: White;
border: 1;
border-width: 1;
margin-left: auto;
margin-right: auto;
width: 85%;
}
th
{
text-align:center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
td
{
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 0 5 0 5px
}
Try this one:
td { width:100px; height:50px; }