I am currently having an issue with TD widths; no matter the length of the spans within the TD elements, it stays a consistent width. I need the TD elements to be completely resized to the width of the longest span element contained within the same column.
.Form {
width: 100%;
}
.Form td {
border: 1px solid black;
}
.Form td > span {
font-weight: bold;
}
.Form td > input[type="text"] {
border-radius: 3px;
box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.4);
width: 99%;
}
<table class="Form">
<tr><td colspan="6"><h3>Some super header text with useful information.</h3></td></tr>
<tr><td colspan="6"><h3>Other useful information.</h3></td></tr>
<tr>
<td><span>LONGEST EVER</span></td>
<td colspan="2"><input type="text" id="txtPOC" runat="server" /></td>
<td><span>Phone</span></td>
<td colspan="2"><input type="text" id="txtPhone" runat="server" /></td>
</tr>
<tr>
<td><span>Short</span></td>
<td colspan="2"><input type="text" id="txtOrg" runat="server" /></td>
<td><span>E-Mail</span></td>
<td colspan="2"><input type="text" id="txtMail" runat="server" /></td>
</tr>
</table>
Related
table {
border-collapse: separate;
border-spacing: 0 15px;
}
tr {
border: 1px solid black;
padding: 5px
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>
I am trying to make a good looking table but I've run into a problem. All the people on the internet say that to space the rows I need to set the ' border-collapse: ' to separate. But then the internet people say that to have the rows be in the same border the ' border-collapse: ' needs to be set to collapse. Is there a way to have both? to have the table have separate spaced out rows that have the same column?
_________________
| cell 1 cell 2|
-----------------
_________________
| cell 3 cell 4|
-----------------
like this ^
Here is an other example with border-radius:
table {
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 5px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
td:first-child {
border-left: solid 1px #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right: solid 1px #000;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
tr.spacer td {
border: 0;
padding: 10px;
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr class="spacer">
<td colspan="2"></td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>
Just add a new row between them and give it a class like in example and style it as you need.
table {
border-collapse: collapse;
}
tr {
border: 1px solid black;
}
td {
padding: 5px
}
tr.spacer {
border: 0;
}
tr.spacer td {
padding: 15px;
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr class="spacer">
<td colspan="2"></td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>
I'm currently working on an Angular 2 CLI project. But while designing my pages I had this issue where I could not center my inputs. Weirdly, I can center my button below my input tags, but I don't know why my inputs are not centered. I am already using the code below in my CSS;
text-align: center;
vertical-align: middle;
This is how my page looks like;
This is my HTML code
<div class="card bg-light" >
<div class="table-responsive">
<table class="card-table table table-hover" style="margin: auto;">
<thead style="background-color: #527678; color: aliceblue;">
<tr>
<th scope="col">#</th>
<th scope="col">Ingredients</th>
<th scope="col">Cup(Bardak)</th>
<th scope="col">Grams</th>
<th scope="col">Calories</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<input type="email" id="form3Example3" class="form-control" style="width: 60%;" />
</td>
<td>
<input type="email" id="form3Example3" class="form-control" />
</td>
<td>
<input type="email" id="form3Example3" class="form-control" />
</td>
<td>
<input type="email" id="form3Example3" class="form-control" />
</td>
</tr>
<tr>
<td colspan="5">
<button type="button" class="btn btn-primary btn-floating" >
<i class="fa fa-plus"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is my CSS code
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
margin-top: 2%;
width: 70%;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #d1dedf;
}
.btn-primary {
background-color: #527678 !important;
border-color: #476668;
border-radius: 50%;
}
input{
width: 30%;
}
.btn-primary:hover,.btn-primary:active, .btn-primary:focus, .btn-primary:active:hover {
background-color: #476668 !important;
}
.form-control:focus {
border-color: #527678;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(71, 102, 104, 0.6);
}
td,th {
text-align: center;
vertical-align: middle;
}
I would really appreciate the help :)
if the input is displayed as block, you can margin auto
input { margin: auto; }
if its displayed inline, then align text center to "td" will be OK
td { text-align: center; }
add display:block; and margin:0 auto; to the input field
I have a weird question, and perhaps it's more suitable for the CSS fans out there, but why would content inside an absolute positioned div overflow out past everything else?
The example provided here (as a picture) shows that the content overflows out the blue bordered div. The content inside this box should rightfully define the the div's height no? How can this be remedied so that my 'blue' box fits to its content?
Here's the markup in question:
* {
box-sizing: border-box;
font-family: Verdana, Arial, sans-serif;
font-size: 9pt;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: rgb(105, 105, 105);
}
#table-container {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
#wrapper {
padding: 25px;
}
.tabs {
position: relative;
margin: 40px 0 25px;
}
.tab {
float: left;
}
.tab label {
background: rgb(105, 105, 105);
padding: 10px;
border: 1px solid transparent;
color: #FFF;
margin-left: -1px;
position: relative;
left: 1px;
top: -26px;
}
.tab label:hover {
background: #000;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: rgb(222, 222, 222);
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid transparent;
opacity: 0;
color: rgb(58, 58, 58);
}
[type=radio]:checked~label {
background: rgb(222, 222, 222);
font-weight: bold;
border-bottom: 1px solid transparent;
color: #000;
z-index: 2;
}
[type=radio]:checked~label~.content {
z-index: 1;
opacity: 1;
}
/* CSS for Table and Field styling */
.table {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
}
.table td {
border: 1px solid #000;
}
.inputbox {
border: 1px solid rgb(170, 170, 170);
width: 100%;
}
.inputbox:hover {
border: 1px solid rgb(109, 109, 109);
}
.input {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 3px;
height: 20px;
}
input[type="text"],
textarea {
width: 100%;
box-sizing: border-box;
}
.input:focus {
background: rgb(255, 255, 196);
}
<div id="table-container">
<div id="container">
<div id="wrapper">
<div style="border: 1px solid red; text-align: left; font-size: 8pt; color: #fff;">Choose language/Choisissez langue:</div>
<div style="border: 1px solid blue; height: 100%;">
<div class="tabs">
<!-- TAB [1] -->
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">English</label>
<div class="content">
<table class="table">
<tr>
<td>Traveller's Name:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="tname" class="input" name="Name of Traveler" tabindex="1" /></div>
</td>
<td style="width: 15%;"></td>
<td>Tan #:</td>
<td></td>
</tr>
<tr>
<td>Destination:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Status:</td>
<td></td>
</tr>
<tr>
<td>iTravel Trip Number:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Date Issued:</td>
<td>
<div class="inputbox"><input type="text" id="dissued" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Event Plan ID Code:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="evt-plan-code" class="input" name="Event Plan ID Code" tabindex="4" /></div>
</td>
<td></td>
<td>Issued by:</td>
<td>
<div class="inputbox"><input type="text" id="issuer" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Dates of Travel</td>
<td>From:</td>
<td>
<div id="ddate" name="Departure Date" tabindex="5"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td>To:</td>
<td>
<div id="rdate" name="Return Date" tabindex="6"></div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Trip Purpose</td>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Français</label>
<div class="content">
tab2
</div>
</div>
</div>
</div>
<div style="border: 1px solid green; text-align: left;">
<input type="button" value="Issue TAN" id="issue">
<input type="button" value="Reset form" id="issue">
<input type="button" value="Save changes" id="issue">
</div>
</div>
<!-- end of div #wrapper -->
</div>
<!-- end of div #container -->
</div>
<!-- end of div #table-container -->
The absolute-positioned div doesn't affect the container div's size since setting position to absolute removes it from the document flow. It's essentially the same behaviour as when position is set to fixed, except it stays at the same place in the page when you scroll. More info can be found here and here.
As for how to fix the height of your div, the short answer is that it can't be done with CSS unless you use a different value for position, perhaps relative in your case but that will depend on the structure of your html. This question covers some other ways that you could go about it.
A table with input field:
table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}
<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td><input type="text" name="text" value="Value"></td>
</tr>
</table>
And a table without input field:
table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}
<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td>Value</td>
</tr>
</table>
So what is the right way to specify cells' width in this case? Really appreciate your help!
UPDATEDjsfiddle . You can give the table table-layout: fixed; and then give to td whatever width you want. Also you should give to input type width 100%;
table{
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
input{
width:100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
You can use the size Attribute of the input element
<td><input type="text" name="text" value="Value" size="20"></td>
<table>
<tr>
<td>sssss</td>
<td width="80px" style="border:1px solid red;"><input type="text" style="width:100px;"/></td>
</tr>
<tr>
<td>sssss</td>
<td style="border:1px solid green;" ><input type="text" ></td>
</tr>
</table>
I have dialog with html :
<div id="sample">
<div class="sample-wraper">
<a class="modal_close" href="#"></a>
<form id="Form1" name="Form1" method="post">
<table id="tt">
<tr align="center">
<td colspan="2" id="naam"><b>Cha test</b></td>
</tr>
<tr>
<td colspan="2">
<div id="boodschap" class="text" style="border-right: 1px solid; border-top: 1px solid; overflow: auto;
border-left: 1px solid; width: 468px; height: 182px; border-bottom: 1px solid;
background-color: white">njnknkkm</div>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="antwoord" name="antwoord" class="text"
style="width: 465px; height: 182px; border-width: 1px; border-style: solid; border-color: black;"
onkeydown="textCounter(antwoord,aantal,1000)"
onkeyup="textCounter(antwoord,aantal,1000)"></textarea>
</td>
</tr>
<tr>
<td class="text" align="left" width="210">
Caráters permitidas
<input readonly type="text" name="aantal" size="3" maxlength="4" value="1000" id="aantal"></td>
<td align="right">
<input id="Submit" name="Submit" type="button" value="Enviar" onclick="submitForm();"
class="button" style="width: 130px">
</td>
</tr>
</table>
<input id="IdTo" name="IdTo" type="hidden">
</form>
</div>
and css like this :
#sample {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
border: 1px solid;
display: none;
padding: 15px 10px 10px;
position:absolute !important;
}
.modal_close {
background: url("Close-icon-download-182005456677-png/button.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Close-icon-download-182005456677-png/button.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Close-icon-download-182005456677-png/button.png',sizingMethod='scale')";
display: block;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
width: 20px;
z-index: 2;
}
Problem is that in IE8 on this dialog in top-left corner i get some square, which disappears if i remove border from dialog (#sample).
http://clip2net.com/s/i6klpi (sample of problem)
In IE7 and IE9 i didn't get this "feature" in corner.
I found this post about problem with IE borders http://www.brasee.com/displayPost.htm?postId=64. As my dialog is with position absolute (this is for not moving dialog when scrolls) i add wrapper of this dialog. So i set for dialog position relative and for wrapper position absolute. But this also didn't help. Get this result: clip2net.com/s/i6lcKz