I read applied the suggested CSS here answers to this problem. But it doesn't help me.
How can I remove this padding?
Also how to add space?
HTML and CSS gives me this output:-
#page {
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
#page td {
padding: 0;
margin: 0;
}
Hello world <br/>
<table id="page">
<tr>
<td align="left"><input type='button' value='button1'></td>
<td align="left"><input type='button' value='button2'></td>
<td align="left"><input type='button' value='button3'></td>
<td align="left"><input type='button' value='button4'></td>
</tr>
<tr>
<td align="left"><input type='button' value='Sort Name A-Z'></td>
<td align="left"><input type='button' value='Save sorting'></td>
</tr>
</table>
To make the buttons the same size, force them to occupy a specific width (in my example, 98% of the available width)
to create "padding" make them smaller then the full available width and center them (please note the css vertical-align is the recommended way to align a td over the deprecated align attribute
#page {
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
#page td {
padding: 0;
margin: 0;
vertical-align: center
}
input[type="button"] {
width: 98%;
}
Hello world <br/>
<table id="page">
<tr>
<td align="left"><input type='button' value='button1'></td>
<td align="left"><input type='button' value='button2'></td>
<td align="left"><input type='button' value='button3'></td>
<td align="left"><input type='button' value='button4'></td>
</tr>
<tr>
<td align="left"><input type='button' value='Sort Name A-Z'></td>
<td align="left"><input type='button' value='Save sorting'></td>
</tr>
</table>
There are so many ways to do that. Here is an example. First I decide the size of the table, then I make the inputs width:100% and finally I add a margin-left.
#page {
border:0px;
border-spacing:0px;
}
#page td {
padding: 0;
margin: 0;
}
/*Makes all the inputs 100% width and add a margin*/
input {
width: calc(100% - 20px);
margin-right: 20px;
}
/*Define a size for the table*/
table {
width: 600px;
}
<html>
<header><title>This is title</title></header>
<body>
Hello world <br/>
<table id="page" >
<tr>
<td align="left"><input type='button' value='button1' ></td>
<td align="left"><input type='button' value='button2' ></td>
<td align="left"><input type='button' value='button3' ></td>
<td align="left"><input type='button' value='button4' ></td>
</tr>
<tr>
<td align="left"><input type='button' value='Sort Name A-Z'></td>
<td align="left"><input type='button' value='Save sorting' ></td>
</tr>
</table>
</body>
Related
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset) {
margin: 1;
padding: 1;
}
<form>
<fieldset>
<legend style="font-weight: bold">
Persoonsgegevens
</legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</label></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</label></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</label></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</label></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
I'm learning HTML/CSS and working on a form to learn the syntax.
In the form I have a multiple fields like input type="text" input type="number" and type="text" with pattern.
The width of the number and text with pattern fields is smaller then the width of the regular text fields. I've investigated this and solved this by adding the following CSS code:
*:not(.menu){
Margin: 1;
padding: 0;
}
That worked fine but I'm using a fieldset in which I want to set the padding with the following code:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
This code does not work unless I change the previous code to:
*:not(.menu)(fieldset)
margin: 1;
padding: 1;
}
but then the text field with pattern and number field aren't the same size as the regular text field anymore.
Anybody any ideas how to fix this?
You can set the width of all input fields in the css like this:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset){
margin: 1;
padding: 1;
}
input {
width:200px; /*<------Set the width here as you desire*/
}
<form>
<fieldset>
<legend style="font-weight: bold"><h3>Persoonsgegevens</h3></legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</lable></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</lable></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</lable></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</lable></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
Here I made a picture, to show you that they are all the same:
I would like to do something like this:
Prefix - Input(Type: Text, Number,..) - Suffix - Button
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>
</ul>
I have a fixed width within this 4 things have to be placed.
I don't know the Prefix, Suffix and also not the Text of the Button.
I would like that all those 3 elements use the minimal possible space and the width of the inputtag fills up this place.
Is this possible?
I would not like to use a table or JS IF POSSIBLE
Use Flexbox layout.
Given this html:
<section>
<label>pre</label>
<input type="number" size="1"/>
<label>suf</label>
<input type="button" value="longervalue"/>
</section>
All you need is:
section {
display: flex;
}
input[type=number] {
flex-grow: 1;
}
jsFiddle
Use belo code
<style>
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
</style>
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>
This question already has answers here:
text in table cells not centered as in headers
(2 answers)
Closed 8 years ago.
CSS:
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}
HTML:
<table>
<tr>
<th class= "one">Quantity</th>
<th class= "two">Info</th>
<th class= "three">Price</th>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity1" value=""/>
<td class = "two">Cheap Monday Jeans 30/34 </td>
<td class = "three">$39.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity2" value=""/></td>
<td class = "two">Herschel Bag (free) </td>
<td class = "three">$129.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity3" value=""/></td>
<td class = "two">Diesel t-shirt (s) </td>
<td class = "three">$59.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity4" value=""/></td>
<td class = "two">Superdry Patrol Lite Jacket (m) </td>
<td class = "three">$129.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity5" value=""/></td>
<td class = "two">I love Canada t-shirt (s) </td>
<td class = "three">$19.99 </td>
</tr>
</table>
I want the table rows (clothes information & prices) to be aligned right below the table headers. Meaning, I want it to be centered. I don't know why table rows are skewed to the left and cannot be aligned right below to the headers.
Even tried
td { text-align: center; }, but doesn't work.
Help would be appreciated, thank you.
Left align the th header elements. You could also center align the td elements but it doesn't look as pretty.
th.one {
text-align:left;
}
th.two {
text-align:left;
}
th.three {
text-align:left;
}
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}
Hey see this demo hope it works for you
link
These are the only changes you have to do in your CSS part :
.one {
width: 1%;
text-align:center;
}
.two {
width: 10%;
text-align:center;
}
.three {
width: 10%;
text-align:center;
}
The output that i got was like this :
I hope this is what you want .
you should make the <th> elements align left:
th {
text-align:left;
}
Also, you should consider using the <colgroup> tag, with nested <col> tags to style your table columns, as such:
<table>
<colgroup>
<col class="one" />
<col class="two" />
<col class="three" />
</colgroup>
<tr>
<th>Quantity</th>
<th>Info</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text" name="quantity1" value=""/>
<td>Cheap Monday Jeans 30/34 </td>
<td>$39.99 </td>
</tr>
...rest of the code
This way, you don't have to add the "class" attribute to ALLLLL the <td>s.
Is that what you want? DEMO http://jsfiddle.net/yeyene/u7WzM/2/
Right align, and center.
th.one, td.one {
text-align:center;
}
th.two {
text-align:center;
}
td.two {
text-align:right;
padding-right:5%;
}
th.three, td.three {
text-align:center;
}
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}
Add text-align:center; to the css classes.
.one {
width: 13%;
text-align:center;
}
.two {
width: 30%;
text-align:center;
}
.three {
width: 30%;
text-align:center;
}
Or add
td
{
text-align:center;
}
The problem is that you want something left aligned to line up beneath something center aligned. Your best bet is probably to left align the headings and using some padding to provide space between the columns.
HTML:
<table>
<tr>
<th class= "one">Quantity</th>
<th class= "two">Info</th>
<th class= "three">Prices</th>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity1" value=""/></td>
<td class = "two">Cheap Monday Jeans 30/34 </td>
<td class = "three">$39.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity2" value=""/></td>
<td class = "two">Herschel Bag (free) </td>
<td class = "three">$129.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity3" value=""/></td>
<td class = "two">Diesel t-shirt (s) </td>
<td class = "three">$59.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity4" value=""/></td>
<td class = "two">Superdry Patrol Lite Jacket (m) </td>
<td class = "three">$129.99 </td>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity5" value=""/></td>
<td class = "two">I love Canada t-shirt (s) </td>
<td class = "three">$19.99 </td>
</tr>
</table>
And CSS:
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}
th {
text-align: left;
}
.two, .three {
padding-left: 10%;
}
For example: http://jsfiddle.net/cpmmk/
I'm having trouble getting a table inside a div to always be 100% of the inside of the div, and it appears that the inside table is always a different size inside the div. Perhaps I've muddied the waters on using a table inside, but I do have a bunch of formatting to try display properly. Hoping it does same in either browser etc.
Any help is appreciated.
Most code below.
Overflow Here - when using width=100% inside table
<script language="javascript">
function one_edit() {
var ele = document.getElementById("one_edit");
var text = document.getElementById("one_displayedit");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<b>ONE</b>";
}
else {
ele.style.display = "block";
text.innerHTML = "<b>ONE</b>";
}
}
</script>
<script language="javascript">
function two_edit() {
var ele = document.getElementById("two_edit");
var text = document.getElementById("two_displayedit");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<b>TWO</b>";
}
else {
ele.style.display = "block";
text.innerHTML = "<b>TWO</b>";
}
}
</script>
<style type="text/css">
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 21%;
margin-right: 21%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
.fqlist {
font-family: Verdana; font-size: 12pt; font-weight: normal;
position: relative;
background-color: #f8f8f8;
padding: 5px;
margin-bottom: 5px;
margin-left: 21%;
margin-right: 21%;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.code10 { font-family: Verdana; font-size: 10pt; font-weight: normal; color: #cc0033;}
.instable {
margin-bottom: 8px;
border: 1px solid #474747;
background-color: #eeeeee;
}
</style>
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<a id="one_displayedit" href="javascript:one_edit();"><b>ONE</b></a>
</td>
<td align=right><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(one_)"></td>
</tr>
</table>
</div>
<div id="one_edit" style="display: none" class=fqlist>
<table cellpadding=3 cellspacing=3 align=center class=instable>
<tr>
<td align=center><input type="button" name="CheckAll" value="All Yes" class=verd8 onClick="checkAll(one_yes)"></td>
<td align=center><input type="button" name="CheckAll" value="All No" class=verd8 onClick="checkAll(one_no)"></td>
<td align=center><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(one_)"></td>
</tr>
</table>
<table cellpadding=3 cellspacing=3 align=center class=instable>
<tr>
<td valign=top colspan=3 align=center>
This is a General Question for whatever.
</td>
</tr>
<tr>
<td colspan=3 align=center>
Some General Notes
</td>
</tr>
<tr>
<td align=center class=verd11><b>Yes</b></td>
<td align=center class=verd11><b>No</b></td>
<td align=center class=verd11><b>N/A</b></td>
</tr>
<tr>
<td valign=top colspan=3 align=center>
<span class=code10>General Notes About Question Rules.</span>
</td>
</tr>
<tr>
<td colspan=3 align=center class=cnote width=100%>
<b>Compliance Note:
<br>
<textarea style="width:85%" rows="3" name="compliancenote_#qid#"></textarea>
<br>
</td>
</tr>
</table>
</div>
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<a id="two_displayedit" href="javascript:two_edit();"><b>Two</b></a>
</td>
<td align=right><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(two_)"></td>
</tr>
</table>
</div>
<div id="two_edit" style="display: none" class=fqlist>
<table cellpadding=3 cellspacing=3 align=center class=instable>
<tr>
<td align=center><input type="button" name="CheckAll" value="All Yes" class=verd8 onClick="checkAll(two_yes)"></td>
<td align=center><input type="button" name="CheckAll" value="All No" class=verd8 onClick="checkAll(two_no)"></td>
<td align=center><input type="button" name="CheckAll" value="All N/A" class=verd8 onClick="checkAll(two_)"></td>
</tr>
</table>
<table cellpadding=3 cellspacing=3 align=center class=instable>
<tr>
<td valign=top colspan=3 align=center>
This is a General Question for whatever and is bigger than the other question, and I am trying to keep going to make it bigger and longer.
So not sure how to get these showing as same width across entire div length.
</td>
</tr>
<tr>
<td colspan=3 align=center>
Some General Notes
</td>
</tr>
<tr>
<td align=center class=verd11><b>Yes</b></td>
<td align=center class=verd11><b>No</b></td>
<td align=center class=verd11><b>N/A</b></td>
</tr>
<tr>
<td valign=top colspan=3 align=center>
<span class=code10>General Notes About Question Rules.</span>
</td>
</tr>
<tr>
<td colspan=3 align=center class=cnote width=100%>
<b>Compliance Note:
<br>
<textarea style="width:85%" rows="3" name="compliancenote_#qid#"></textarea>
<br>
</td>
</tr>
</table>
</div>
It doesn't seem like you're applying width:100%; to the overflowing table. Try doing that (I believe the overflowing table is .instable):
.instable {
width:100%;
}
Also try viewing it in different browsers to see whether it works. I'm using Chrome and the table doesn't even fill the entire div.
I have several forms like this:
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_std">
<tr id="exam_String_newValue_row">
<td width="150" class="table_defaultHeaderColumn">Προκαθορισμένη Τιμές</td>
<td width="802" class="table_defaultHeaderColumn" >
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td width="150" class="table_defaultHeaderColumn">Διάγνωση - Αληθής</td>
<td width="802">
<input name="Exam_String_value" type="text" style="width:600px" id="textfield2" />
</td>
</tr>
<tr>
<td width="150" class="table_defaultHeaderColumn">Διάγνωση - Ψευδής</td>
<td width="802">
<input name="Exam_String_value" type="text" style="width:600px" id="textfield2" />
</td>
</tr>
</table>
css
.table_defaultHeaderColumn {
font-size: 11px;
}
.input_std {
width: 200px;
}
.input_small {
width: 4em;
}
.table_std {
border-collapse:collapse;
}
.table_std td {
padding-top: 1px;
padding-bottom: 1px;
}
The problem is the height of the cells.... isnt equal in all browsers...
any solution?
I found why...
The solution is to set vertical align to middle otherwise
Before doing any css changes, set margin and padding to 0 then change if needed. Also set line-height to 1em.