Ok, i have a wordpress site, i added a table and use the
white-space: no-wrap;
Since i want the table headers to stay on a single line, the table have too many headers and need to make to stay outside of the content "boundary" (that is fine with me).
The problem is that when i zoom in and out with the browser, the table change position (moves a lil bit left or right and dosnt stay centered) i center it manualy with the "margin".
Im very new to css, hope i describe the issue enough.
.dataTables_wrapper .tablepress {
white-space: nowrap;
clear: both;
margin-left: -50px;
}
.entry table {
border: 1px solid #DFDFDF;
background-color: #F9F9F9;
width: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
color: #333;
border-collapse: separate;
border-spacing: 0;
}
.tablepress {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 1em;
border: 0;
}
Does setting a width not work?
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
table{border:1px solid #000;width:100%}
link to fiddle
It might also help if you provided a little more information, like where abouts on your page you want to put this table
Related
I want to have my b-table have rounded borders
I've tried multiple different solutions I found online but it still hasn't worked out for me
For reference, this is what I want my table to look like in terms of borders:-
And this is my current table:-
for my CSS I've used the following:-
.content-table {
border-collapse: separate;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
overflow: hidden;
border: 2px solid #5B5B5B;
border-radius: 15px;
background-color: #5B5B5B;
border-spacing: 0;
}
However, as my current table image show, this means my rows do not have their top or bottom headers
I have also tried using border-collapse: collapsed without the border-spacing 0 but then I will get a result like this:-
However, this is also an issue whereby the border is extending over in all the corners
Any assistance would be greatly appreciated!
Adding rounded border to a table is little bit tricky,
table { position:relative;max-width:600px }
table::after {
content: " ";
inset: 0;
border: solid #000 1px;
position: absolute;
border-radius: 20px;
}
DEMO
I'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
I can't find error, trying this for the last 1h.
Here is page http://kushke.5gbfree.com/SecondPage.html
I want to center "To do list" header
table {
border: 3px solid orange;
background-color: yellow;
width: 100%;
text-align: center;
}
td, th {
color: black;
border: 2px dashed black;
}
#th1 {
padding-right: 160px;
text-align: center;
}
<table>
<tr>
<th id="th1" nowrap><h3>To do list</h3></th>
<th><h3>Done</h3></th>
<th><h3> Hard</font></h3></th>
</tr>
</table>
The problem appears to be
#th1 {
padding-right:160px;
}
If you need padding, add it to both sides of the th:
#th1 {
padding-left: 20px;
padding-right: 20px;
}
You shouldn't use the padding property to maintain a certain width for the column of your table. By adding a padding property, you lose the center alignment.
So, remove
#th1 {
padding-right: 160px;
align: center;
}
and replace it with the code below:
#th1 {
width: 180px;
padding: auto;
}
Of course, you can set your custom width by modifying the value at the code snippet above.
Try to add this to th element: To do list
Because of your help, I have solved this.
No further comments needed, but if you want upvotes, write anything,
I will respond.
Best regards!
First off the title may not be clear but i dont know to come up with a better one.
i have text that I put in a td cell in a velocity template, something like below
* My name
is what?
what i want is something that more formatted like below.
* My name
is what?
"My name is what?" is variable i print and all i do is concatinate * to it and put in the cell for display
what can be done to make it happen. i am not sure of the best way to start off with. I use IE8
Here is one possible solution that may work for you:
Demo Fiddle
Instead of separating content into different elements and positioning them (or nesting them). I thought a simple before class could work well in this situation.
HTML:
<div class="copy-block">
My name is what?
</div>
CSS:
.copy-block {
width: 60px;
position: relative;
}
.copy-block:before {
content: "*";
position: absolute;
left: -15px;
top: 3px;
}
The name is variable. The output on two lines can be solved with adding a break in the table cell.
table {
border: 1px solid gray;
font: 12px arial;
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
.asterix-name {
position: relative;
padding: 5px 5px 5px 15px;
}
.asterix-name:before {
content:'* ';
position: absolute;
left: 5px;
top: 0.5em;
}
<table>
<tr>
<td>
<div class="asterix-name">My name<br> is what?</div>
</td>
</tr>
</table>
http://jsfiddle.net/Fb7jT/49/
With this html:
<div class="sectionheading">User Information</div>
<table id="UserInputTable" class="xInputTable">
...and this CSS:
.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}
.xInputTable {text-align:left;
vertical-align:middle;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-collapse:separate;
overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}
The DIV ends up rendering 2 pixels wider in both IE and Firefox (the left borders line up perfectly, the right borders are off by two pixels). Using the IE web dev toolbar, both elements have a width of 100%. In Firebug, they have widths of 950px and 948px. Here is the computed CSS (from IE developer toolbar):
DIV
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
TABLE
BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;
Any idea what concept I'm missing here?
Wild guess here, but tables by default have cellpadding or cellspacing (can't remember which one) set to 2px by default, unless you set border-collapse: collapse;.
This doesn't affect the table itself, but the td's inside the table.
If my guess is correct, either of the following should work:
Set border-collapse: collapse; in the css for the table
Put "cellpadding="0" cellspacing="0"in the` tag
Add a new CSS declaration table.xInputTable td { padding:0; margin:0; }
Could be the 2 pixels for each (left and right) border which aren't taken into account when calculating the width.
Try to not set the width specifically on the div (and maybe the table too). They default to 100% but get calculated slightly different when it's set, I believe.
pb is correct.
When you apply "border" to a table, it will adjust the width to accommodate for the border. DIVs will add the border in addition to the width (as will most elements with a specified width, tables are special).
Hurix is correct that there is no point in adding width 100% to the div since it is a block element and will take up the full width of the parent by default, so you can take it off and it will auto-size to stay inside the parent even with the border added to its width. The table, however, should get the width: 100% if you want it to be full width.
Borders act like padding, so you are adding 2px to your width => 100% + 2px
Also consider using meyers reset.css to make sure your on level ground before jumping in.
http://meyerweb.com/eric/tools/css/reset/
Also you are getting sorta crazy with the all caps thing.
Ok so, in my opinion, at this point I would roll all the way back to just the html. Use FireBug religiously and only add one CSS attribute at a time to be sure that it doesn't have a negative effect on the layout.
Unfortunately the nature of CSS is that it is full of exceptions and things to consider with inheritance. Starting with just a reset.css, and maybe making all your different major elements a different background color (because that wont change the size like border) can help you see where you elements ACTUALLY reside.
Following up on kmiyashiro and pb I wanted to add that if you wrapped your table in a div with the style "width:100%; border: solid thin red; border-top-style:none;" and changed the style on "table.xInputTable" to "width: 100%" then everything should line up.