|
CSS - Adding A Row In A Table And Populating A New Row
I have been working on a school project and I need to add last column and create another row on the bottom and apply that data to a total using CSS. Here is my xml code
Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Groceries</title> <!-- This code links my style sheet to my html document. --> <link rel="stylesheet" type"text/css" href="p1b.css" /> </head> <body> <h1>Grocery List</h1> <table border="1"> <tr> <th>Item</td> <th>Manufacturer</td> <th>Size</td> <th>Unit Price</td> <th>Quality</td> <th>Total Price</td> </tr> <tr> <td>Corn Flakes</td> <td>Kelloggs</td> <td>18 oz</td> <td>2.50</td> <td>1</td> <td>2.50</td> </tr> <tr> <td>Solid White Tuna</td> <td>Starkist</td> <td>5 oz</td> <td>2.79</td> <td>2</td> <td>5.58</td> </tr> <tr> <td>Cream of Mushroom Soup</td> <td>Cambell's</td> <td>10.75 oz</td> <td>1.00</td> <td>2</td> <td>2.00</td> </tr> <tr> <td>2% Lowfat Milk</td> <td>Safeway</td> <td>0.5 gal</td> <td>1.99</td> <td>1</td> <td>1.99</td> </tr> <tr> <td>Extra-Wide Egg Noodles</td> <td>Golden Grain</td> <td>12 oz</td> <td>0.87</td> <td>3</td> <td>2.61</td> </tr> </table> </body> </html> and here is my CSS code Code: /* CSS Document p1b */ { background-color:white; } /* this is where I change the lins in the table */ table, th, td { border:0px; border-collapse:collapse; text-align:left; padding:5px } table { padding:10px; border:10px solid #d0d0ff; margin:20px; }
Can anyone help I'm trying to add the total prices column and creating another row that shows Total. Similar TutorialsI have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I promise once I become more versed in the mechanical rather than graphical side of web design, I'll start giving back more. But untill then... I have several div's, all absolutly positioned, but I need this one, (see attached picture) it is the bottem right div, that will have several above and several div's above it. I need to know how to do this without absolute positioning. Because with absolute positioning, I would have to manually resize each time I do an update. Thanks, -Sam Does anyone no some really good resources of info for adding css to xml. Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan How can this be fixed? Code:
<table border=5 cellpadding="0" cellspacing="5" bordercolor="#cc66cc" >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
firefox is doing like a bordercolorlight/dark combo out of my bordercolor, but IE is fine.. see ss's. I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e. .click_for_larger:after { font-size: 0.8em; content:"<br />- Click for larger version -"; } Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed? Cheers - george hello there i am starting my own site pretty soon and i am stuck at the final desgin stage and i tryed everything to edit the .css and add images and so did the guy i hired to install the script the site is koooraup.com as you can see i have 2 blank spaces on both sides what i want to do is the following add about 4 logos at each side like the EPL logo i got all the logos ready but i couldnt figure out how to add them so can some one help please here is the .css contents Quote: body{ background:#48494B; } #mainc{ width: 780px; background-color:#FFFFFF; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 10px solid #FFFFFF; } #header{ margin: 0 auto; width: 780px; background-image:url(/images/h_bg.gif); background-repeat: repeat-x; height: 169px; } #hd_top{ margin: 0 auto; width: 780px; height: 42px; background-image: url(/images/hd_top.gif); } #hd_down{ width: 780px; margin: 0 auto; height: 36px; } #container{ width: 780px; margin: 0 auto; background-image:url(/images/b_bg.gif); background-repeat:repeat-y; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color:#FFFFFF; } fieldset#formwrap { border : 0; } /* section fieldsets - it's common to make this border : 0; */ fieldset { border : 0; } #footer{ text-align: center; width: 780px; height: 23px; padding-top:5px; background-image:url(/images/f_bg.gif); background-repeat:repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; } #browse{ width: 434px; height: 30px; background-image:url(/urlbox.gif); padding-left: 40px; } #input{ background-image: url(/urlbox.gif); no-repeat; border: none; padding-left: 40px; width: 474px; height:30px; font-size: 18px; } table, td{ font:100% Arial, Helvetica, sans-serif; } table{width:100%;border-collapse:collapse;margin:1em 0;} th, td{text-align:center;padding:.5em;border:1px solid #fff;} th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;} td{background:#ffffff;color:#000000;} /* tablecloth styles */ tr.even td{background:#e2e2e2;} tr.odd td{background:#e2e2e2;} th.over, tr.even th.over, tr.odd th.over{background:#ff1933;} th.down, tr.even th.down, tr.odd th.down{background:#bce774;} th.selected, tr.even th.selected, tr.odd th.selected{} td.over, tr.even td.over, tr.odd td.over{background:#bce774;} td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;} td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;} /* use this if you want to apply different styleing to empty table cells*/ a { color:#FFF; text-decoration:none; border-bottom:2px dotted #CE3939; font-size: 15px; } .file_1 { background: url('images/urlbox.gif') no-repeat; border: none; padding-left: 40px; width: 434px; height:30px; font-size: 18px; } #credit { text-align:center; font-family: Arial, Helvetica, Verdana, sans-serif; font-size:small; padding-top:3px; } #credit a { color:#000; text-decoration:none; border-bottom:none; font-size: 13px; } #credit td ( background:#48494B; color:#000000; } #div_file{position:static;left:-9999px;} #div_url {position:absolute;left:-9999px;} and if possible make the background black thanks alot in advanced i been trying to do this for the last 2 days regards ahmed Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code: Code: nl#navBar {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
list-style-type: none;
display: inline;
}
nl#navBar li a:before {
content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg_hover.gif);
}
I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work. |
|||||||