I am trying to build a website using fullpage.js as a baseline. I cannot figure out why my tables are not formatting properly inside each section, i.e setting border colours will not work. Any help is appreciated :)
(New coder that wants to learn everything)
.tour-table {
width: 50px;
border: 1px solid black;
}
.tour-table tr {
margin: auto;
padding: 40px;
}
<table class="tour-table">
<tr>
<td> Test1 </td>
<td> Test2 </td>
</tr>
</table>
I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.
HTML:
<table>
<tr>
<td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
</tr>
<tr>
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
border: none;
margin: 0;
padding: 0;
line-height: 0;
display: block;
font-size: 0;
img {
vertical-align: top;
border: none;
margin: 0;
padding: 0;
font-size:0;
display: block;
}
You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.
You want the images to scale to fit the width of the table cells.
you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.
Note: I built a flexible/responsive layout, which I think might be what you need.
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: 1px solid blue;
}
td {
border: none;
padding: 0;
width: 33%;
}
img {
display: block;
width: 100%;
}
tr.labels td {
background-color: beige; /* for demo only */
text-align: center;
padding: 20px 0;
}
tr.images td {
padding: 5px; /* for demo if so needed */
}
<table>
<tr class="images">
<td>
<img border="0" alt="java" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="python" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="htmlcss" src="http://placehold.it/568x296">
</td>
</tr>
<tr class="labels">
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.
I have web application performing report printing.
my code look like this & it works properly.
HTML
<table>
<thead>
<tr>
<th>
Header part
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="reportView">
<div class="head centerPosition noPrint">
Report header
</div>
<div class="content" style="margin: 0px;">
<div id="report" style="margin-top: 10px;">
report content
</div>
</div>
<div class="foot noPrint">
Report footer
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS
<style media="print">
body
{
background-color:#FFFFFF;
margin: 0px; /* this affects the margin on the content before sending to printer */
width: 100%;
}
#site_header, #site_footer, .noPrint
{
visibility: hidden;
display: none;
height: 0px !important;
overflow: hidden !important;
}
#report .content
{
width: 100%; margin: 0px; float: none;
background: transparent;
}
#report {
background-color: white;
width: 100%;
}
</style>
After I print any report, the report is scale down on paper.
If anyone have an idea how to fix this please help me. I have try to search on google but none of the suggestion are work.
Thanks in Advance...
My guess (because I can't test right now) is that you also need to declare width:100% on each of the containers above #report .content (from the HTML you've provided, it looks like #reportView and the table and td that contains it all, but there may be more). Otherwise it will collapse to it's content width, which is the default behavior of a table cell.
So I have this code here:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
with the CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
It should be:
<td width="200">
or
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.
EDIT
As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
This problem is quite easily solved using min-width and max-width within a css rule.
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
This will force the first column to be 80px wide. Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty. The OP's question was about setting to a fixed width though, hence both rules together. On many browsers width:80px; in CSS is ignored for table columns. Setting the width within the HTML does work, but is not the way you should do things.
I would recommend using min and max width rules, and not set them the same but rather set a range. This way the table can do it's thing, but you can give it some hints on what to do with overly long content.
If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text, I use white-space: nowrap; on the main rule, then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it.
Something like this:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
It just depends on exactly what you are trying to achieve. I hope this helps someone.
PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome
You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
You can try the "table-layout: fixed;" to your table
table-layout: fixed;
width: 150px;
150px or your desired width.
Reference:
https://css-tricks.com/fixing-tables-long-strings/
You can use within <td> tag css : display:inline-block
Like: <td style="display:inline-block">
try this:
word-break: break-all;
try to use
word-wrap: break-word;
hope this help
I use
<td nowrap="nowrap">
to prevent wrap
Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
Note that adjusting the width of a column in the thead will affect the whole table
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe#email.com</td>
</tr>
</table>
In my case, the width on the thead > tr was overriding the width on table > tr > td directly.
I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property
This was my HTML requirement
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
My CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.
Use
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column)
to specify length to each cell
I have the same problem as Possible to fill a table cell with a bg color?.
The problem is that i'm using a sitemap and not sure how to set the css for the td tags.
(This works fine in firefox and IE8, but not IE7)
I'm using the following CSS:
.subMenu
{
z-index: 100;
min-width: 118px;
border: solid 1px #545454;
text-align: center;
}
.subMenuItem
{
width: 100%;
min-width: 118px;
padding: 5px;
border-bottom: solid 1px #545454;
background-color: #4D97CB;
color: #DDDDDD;
text-align: center;
font-weight: bold;
font-size: 11px;
}
which gives the folloing HTML:
<div id="ctl00_mnuNavigationn1Items" class="ctl00_mnuNavigation_0 subMenu ctl00_mnuNavigation_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mnuNavigationn3">
<td>
<table class="subMenuItem ctl00_mnuNavigation_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;">
<a class="ctl00_mnuNavigation_1 subMenuItem ctl00_mnuNavigation_5" href="/Asidua.BPM.Web.WebApplication/Expenses/Default.aspx" style="border-style:none;font-size:1em;">Click here</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
You must apply the CSS style to the td element instead of the a element. A span-like element (like a link, or em, strong, or span) does not support setting the background by default.
[EDIT] If you don't generate this code yourself, then you have these options:
Get the source of the HTML/CSS generator and modify it to add the necessary CSS attributes to the td elements
If this is on the server, check whether you can add a filter to the output of your app. This filter can then add the necessary CSS.
If everything else fails, you can use JavaScript on the client to navigate the DOM and add the attributes in onload.
Another solution could be to set the a element to display:block in the CSS. That would make it fill the entire area of the parent element.
Also, if it's a background-color, you may need to set the height and width of the a element to match the parent's.