I'm going off my rocker with IE/CSS problems! I've tried everything (I think) is imaginable to center the text of a table cell. I started with the old, archaic method:
<tr>
<th width="100" align="center" class="centerme">Some text here.</th>
</tr>
Then, I tried CSS:
.centerme {text-align:center;margin:0 auto;}
Then I tried putting the style inline (keeping ALL the other methods already mentioned):
<tr>
<th width="100" align="center" class="centerme" style="text-align:center;">Some text here.</th>
</tr>
What could I possibly be missing? I tried center aligning the <tr> element, which shouldn't make a difference, but then IE is a nightmare to get along with! Note this is only a problem in IE. It is fine in every other browser (and this is IE 8)
Removing the width="100" resolved the issue.
Try this:
td
{
height: 50px; (or whatever value you want)
width:50px;
}
#cssTable td
{
text-align:center;
vertical-align:middle;
}
Try this code. I was able to get it to work.
The margin centers the table on the screen. So delete it if you do not want it to be centered.
Change the width to whatever you desire. Right now it is 100% for the whole width of the screen.
HTML:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS:
table, th, td
{
border: none;
margin:0px auto;
text-align:center;
}
table{
width:50%;
}
Related
I have a bootstrap table as follows:
<table class="table table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
The two column are equally spaced which is fine but if i drop an <input> element in to one of the columns this column stretches to take up about 3/4 of the overall table.
http://www.bootply.com/115049
My question is why does it do this and how can I control it?
Any help much appreciated.
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-10">Col1</th>
<th class="col-md-2">Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
This is down to the way HTML tables work. By default, table cells will scale according to their contents - any size you give them is used as a guide. So, for instance:
td {
width: 50%;
/*
If this cell is empty, it will take up half of
the table. But if the content needs to, it will
expand to take up more space.
*/
}
You can work around this by setting table-layout: fixed; in your CSS:, e.g.
table.fixed {
table-layout: fixed;
}
This makes tables adhere more strictly to the dimensions you set in CSS, rather than what the content dictates. See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information.
Once this is done, you can apply the normal Bootstrap grid classes to control the width. Apply them to the cells (td or th) in the first row and they'll repeat all the way down.
Why ? I don't know :)
How to control it ?
You can simply but a width parameter to your td, such as :
<td width=50%><input type="text"></td>
You can do it like this, or using your css file by saying all from this class should take half of the table width.
td {
width: 50%;
}
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.
I have a table
<table cellpadding="0" cellspacing="0">
<tr>
<td>dfa sdfs fsafsdfasdfs dfsdf dsf</td><td>sdfds fdasfsffsdfsdfsdffsfd</td>
</tr>
<tr>
<td>dfas dfs</td><td>sdfdsf dasfs ffsd fsdfsdfsfd</td>
</tr>
<tr>
<td>dfasdfsdffsdfdfasdfsd fsdf dsf</td><td>ssdffsfd</td>
</tr>
</table>
and I need the long columns to not stretch out the table but to word wrap.
how can i do this
I ultimately need each column to have a width of 50px.
You want to do this in CSS, so like this.
table td{
width:50px;
}
td{
word-wrap: break-word;
}
this should work for you
Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?
This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.
I've tried stuff like putting exact heights on the rows, say "<tr style="height:20px;"> and I've tried 100% height on the last row, no luck so far!
Update:
This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content. Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.
If javascript is ok, you could use jQuery and find the top position of the last row and the position of the bottom of the window or element. The difference should be set as the height of the last row.
I didn't do any code yet, because I wasn't sure if you were looking for a table inside of an object or to have it fill to the bottom of the window. I can do that for you if you'd like with some more detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
<tr>
<td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td valign=top style="padding:0px;">
<table height=1>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td valign=top>full<br><br><br>more full</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Updatedx3, works in ie6/ff