This question already has answers here:
Setting the height of a table in HTML has no effect
(4 answers)
Closed 4 years ago.
I have a simple html table
I am not able to set the height for this table
Am i missing something
<table border="1" id="abc1" height="10px;" >
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
</table>
Place table inside a div and give height to that div.
Both border and height, which you're trying to set, are actually CSS attributes, not HTML.
Set them in the following way:
<table id="abc1" style="border: 1px; height:10px;" >
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
<tr><td><b>Name</b></td></tr>
</table>
Or, alternatively, you can use a linked CSS style sheet like this:
#abc1 {
border: 1px;
height: 10px;
}
Just to let you know, setting the height of the table element sets the height of each row, if you want to set the height of the whole table, put the table in div tags and set the height of that element.
What are you missing? you're missing the concept of styling with CSS, try this tutorial: HTMLdog.com
I just solved a similar problem.
For this I used the line-height property for setting each element of table's size.
Also, here you can find more information: http://www.w3schools.com/cssref/pr_dim_line-height.asp
Here is it's usage:
<table style='line-height: 3px'>
Also you can use percentages instead of absolute values.
Firstly you need to know which html renderer will render your html code. Visit this site: http://www.campaignmonitor.com/css/ , after this you can decide which solution is better.
1) Use inline-css for your table tag like this:
<table style="height:50px;"></table>`
2) Use an internal style sheet for your table tags like this:
<head>
<style>
table { height:50px; }
p { color:blue; }
</style>
</head>
3) Use an external style sheet like this and give a height value for the table like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Or you can give a value for the td elements and then the table will automatically figure out it's size.
Example: if you work on an html email you can't use external css. You need to solve it with inline-css (solution 1 above). If it's not supported you are still able to do it in the td tags.
The following code works:
table{
height: 86px;
display: inline-block;
overflow-y: scroll;
}
Related
This is my first question and first website ever, a total beginner so I hope I'm doing it right :)
I made a table with pictures. I added height and width to each, like this:
<td>
<img src="numbers.jpg" title="Numbers" width="300" height="300">
</td>
It worked, but then I tried to delete the sizes and use my external CSS file instead. So i changed it to:
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
And then added in the css file:
.topics {width: 300px;
height: 300px;}
It didn't work, and the pictures are now showing with the original size of the picture file itself. I also tried adding the class to the "td" part instead of the "img", that one didn't work either.
What am I doing wrong?
After being able to do this, with your answers I hope, I'd like another tip for adjusting the pictures to mobile version as well. I tried using percentage (%) and it didn't work. So any insights on that will be great :)
You forgot to say px in the stylings to specify its 300 pixels
.topics {
width: 300px;
height: 300px;
}
Add "px" to your pixel attribute
Be sure to link to your external stylesheet
.topics {
height:300px;
width:300px;
}
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<td>
<img class="topics" src="numbers.jpg" title="Numbers">
</td>
Thanks!
I've just noticed that I forgot the px, indeed.
Sadly, it still doesn't work.
I know the link to the stylesheet is ok since it works on other elements, like the headlines. I'm trying to figure out what else I am missing here...
http://jsfiddle.net/qse5owx6/
Just sick, tried to debug this for an hour. Why the table is stretch by the content? I have wrap the layout properly with tr and td. I'm designing html for emails.
why the width:600px doesn't work on the table?
see here jsfiddle
well this happens because you've set specific fixed widths ( in pixels ) to all the elements , that's why you can't force the table to a smaller width.
i suggest you use percentages as widths for the elements inside the table. for example
tbody { width:100%;}
tr { width:100%;}
td { width:50%;}
OR if you want to keep the widths of the elements fixed (873px) you could wrap all the table inside a div like .wrapper and add
.wrapper {
width:600px;
overflow:auto;
}
see here : jsfiddle
I did some research to create email templates.
I hope this will help you in this.
The steps to create email templates are:
Create the email template as per the guidelines of article
Once the template is ready, transfer all CSS from css files to <style> in <head>
Make all the CSS inline using service
To check which tag and CSS elements are valid for email client, please check link
This question already has answers here:
Customizing Bootstrap CSS template
(9 answers)
Closed 1 year ago.
I have a small problem overriding some of Bootstrap's CSS style.
The standard definition of a bootstrap table has the following code:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
I would like to set margin-bottom to 0px, using my own css code, but I'm having some problems overriding it.
This is my code:
table .table.table-responsive .table-middle {
margin-bottom: 0px;
}
How to fix it?
Thanks in advance! :)
Don't add important. That is a bad habit to fall into and will cause you even more headaches in the future. Plus, I doubt it will solve the problem. Instead, try to find out why your targeting (table .table.table-responsive .table-middle) isn't targeting and overriding the table you want.
The easiest way to do this is via Chrome or Firefox's "Inspect Element". Take a look at the table you want to change. See where the margin-bottom lies. Maybe it's on .table.blue or .container .table or something.
However, judging by your targeting, I doubt that is an issue. Instead, I believe you aren't targeting the element you want.
table .table.table-responsive .table-middle
will look for all <table> elements, then look for children of that <table> element with the classname of table AND table-responsive, and then look inside that element for children with the classname of table-middle.
Your HTML would have to look like this:
<table>
<??? class='table table-responsive>
<??? class="table-middle">
Instead, I'm guessing you have a <table> element that looks something like this:
<table class="table table-responsive table-middle">
Simply writing table.table or table.table-responsiveshould override bootstrap. Worst comes to worst, .table.table-responsive.table-middle will almost certainly work.
Remember
.classname .another-classname
with a space goes parent -> child
.classname.another-classname
without a space is one element that has both of those classes.
try adding the important.
table .table.table-responsive .table-middle {
margin-bottom: 0px !important;
}
Try Using !important after the css text. I have shown a example below
padding-bottom: 4.5rem !important;
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}