The title is pretty self explanatory, but basically I need the table row to be equal to the table space provided and for the table cells to have equal widths. I have tried numerous suggestions online but I haven't been able to figure it out. Any help is greatly appreciated.
HTML:
<div id="content">
<div id="boxes">
<table>
<tr>
<td>
<h2>News</h2>
<h6>The new website is up!</h6>
<p>The new website is up take a look around and be sure to visit our games page and have a good time. =)</p>
</td>
<td>
<h2>Other Stuff</h2>
<h6>This is where some other info goes</h6>
<p>We can type other types of information in here for the general public to know.</p>
</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div><!--end boxes-->
</div><!--end content-->
CSS:
#content{
text-align:center;
width:90%;
margin-left:auto;
margin-right:auto;
}
#content #boxes table{
table-layout:fixed;
}
#content #boxes table tr td{
border-top:30px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
height:250px;
width:23%;
table-layout:fixed;
text-align:left;
float:left;
display:inline-block;
}
#content #boxes table tr td:hover{
border-top:30px solid #F00;
border-left:1px solid #F00;
border-right:1px solid #F00;
}
Change #content #boxes table tr td to:
border-top:30px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-collapse:collapse;
height:250px;
width:25%;
text-align:left;
Fiddle
EDIT: Thanks Pumbaa, removed unnecessary directives
Related
Now with this code I have a dashed and black border in both tables in main table and in nested table.
However, I want it to be a solid and white border for nested table and not to inherit a dashed and black border from the main table. Any clue how to do it?
<table class="outer-table";>
<tr><td colspan="2"></td><td></td></tr>
<tr><td></td><td><table id="inner-table";>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>
table.outer-table, td{ border: 5px dashed black;}
table.outer-table{
border-collapse: collapse;
background-color:red;
width:40%;
height:60%;
}
table#inner-table{
margin-left: auto;
margin-right: auto;
background-color:yellow;
border: 3px solid white;
width:90%;
height:90%;
}
Add the following CSS property to your inner-table's, td element which will override the #outer-table's td style:
table#inner-table td {
border: 3px solid white;
}
i want to hide <th> such a way that happens when we give display:none but if i use this property i can't display it on mouse hover.i placed an up arrow inside the th to point something on hovering the table;
** When my table is not in hovered state those th remain hidden but there remain blank space which i do not want.**
I have tried using like this margin-top:-555px; and on hover margin-top:0 but does not work.
i do not want the red mark area but hover state on given link is ok for me.
please help.
jsfiddle
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
I add position:inherit; in your table:hover th.pointer and it works;
You can try here:
http://jsfiddle.net/gkiwi/t7eecbzp/
Or
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
top:-10px;
left:20px;
position:inherit;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
overflow:hidden;
position:absolute;
top:-20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
I would suggest to not use an extra (useless) <th> for this purpose. You could instead use a pseudo-element on your title <th>, as they seems highly related. See my example below:
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table th.with-arrow {
position: relative;
}
table:hover th.with-arrow:after{
content: "^";
position: absolute;
left: 10px;
top: 0;
color: red;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<tr><th class="with-arrow" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
I have a table, I want to give css "overflow:scroll" to each tr, but its not working. Here is my code.
HTML
<table>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
</table>
CSS
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow-y:scroll;
}
I have made a fiddle with the example please give me a solution.
Check this working demo FIDDLE
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}
you can try overflow:scroll; in td
You may try CSS properties:
overflow: scroll;
or
overflow: auto;
Similarly, you may also use:
`overflow-y` if you want only a vertical scroll or
`overflow-x` if you want only a horizontal scroll
Do set a height for the row and check browser compatibility for all these CSS properties.
Use a set of div instead of a table for better results
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}
this might help, but i am not sure if this is any way of treating the table...
<tr>
<td>your long content here</td>
</tr>
css:
tr{
height:50px;
display:block;
overflow-y:auto;overflow-x: hidden;
}
FIDDLE http://jsfiddle.net/kemalemin/E2r2W/7/
Introduction
I have this portion of HTML:
<!DOCTYPE HTML>
[...]
<table class="inv">
<tr>
<td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
<td class="dt" rowspan="5">
<div style="height:460px;position:relative">
<div class="st msg"></div>
<img src="content/images/site/inv.png"><br>
<a id="nm">USER INVENTORY</a><br>
<span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
<div style="text-align:right;padding-top:15px" class="bts"></div>
</div>
<div id="bot" style="display:none"><span class="bt i_b pp"><</span> <span class="bt i_b np">></span> <span style="font-weight:bold" id="pgs"></span></div>
</td>
</tr>
<tr>
<td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
</tr>
<tr>
<td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
</tr>
<tr>
<td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
</tr>
<tr>
<td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
</tr>
</table>
[...]
Linked to this CSS:
body{
font:16px Arial, Tahoma;
background-color:#222222;
margin:auto;
width:100%;
}
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.inv{
table-layout:fixed;
}
.inv td:not(.dt){
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
}
.inv td:not(.dt) > img{
max-width:100px;
max-height:100px;
cursor:pointer;
}
.inv td:not(.dt) > img:hover{
position:absolute;
z-index:100;
width:110px;
height:auto;
margin-top:-55px;
margin-left:-55px;
box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
width:35%;
padding:10px;
}
.inv .dt img{
width:100%;
height:auto;
}
.inv .dt #desc{
font-size:12px;
color:#B8B6B4;
max-height:60px;
overflow:hidden;
display:inline-block;
}
.bt.i_b{
color:#FFFFFF;
}
.bt.i_b:hover{
background-color:#1B1B1B;
}
.det #nm{
font-size:20px;
font-weight:bold;
}
All the TDs inside the table are filled with images with this code:
for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
$("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}
The problem
Everything works fine, I get what I need (the table filled), but I get some sort of padding/margin at the bottom of every td with an image in it. Even if I have set width and height of the cells to 100px, in Firebug I can see a height of 103.5px, why this happens? I've read that it can be DOCTYPE causing it, but I can't remove it, id there an alternative solution?
Thanks.
"but I get some sort of padding/margin at the bottom of every td with an image in it."
Because img is an inline element, and thats why you see white space at the bottom, use this
table img {
display: block;
}
Now this will target all the images inside table element, so if you want the specific ones, use a class instead and assign like
table img.your_class {
display: block;
}
Demo
In the first image, I've used style="display: block;" and written inline, and not for the other two, so, you will see white space for the next two images but not the first one
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }