I have these textboxes,
looks fine in when the browser is maximized but in mobile or when you minized the below textbox overlap the above textbox.
I'm using the below syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrNext {
min-width: 15em
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
Apologies, as I can't share the full syntax.
Kindly advise if there is any property that i should add/update.
Try adding the following for table
border-spacing: 5px (spacing u wish)
I have updated your code, you were missing a semicolon here min-width: 15em. Also you need to restructure your code.
Since I am not able to reproduce the issue, I suggest you to use the below updated styles. I have used border-spacing below, try that.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.mrNext {
min-width: 15em;
}
.mrQuestionTable {
border-collapse: separate;
}
.mrQuestionTable tr{
border-spacing: 10px;
}
</style>
</head>
<body>
<center>
<div class="mrQuestionText">
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You add white-space: nowrap; for 1st column
and th -must be only in the thead section
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrGridCategoryText{white-space: nowrap;}
.mrNext {
min-width: 15em;
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You need to use padding on your td elements in the media query.
html
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
css
#media only screen and (min-width: 320px) and (max-width: 768px){
.mrQuestionTable tbody tr td {
padding-bottom: 1em;
}
}
Related
I wish to get table that looks like this:
Blue element is auto generated table in main table.
Problem is that i don't now how to keep columns. Best i can do is:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>
Date
</th>
<th>
Zm
</th>
<th>
Service
</th>
<th>
Pozition
</th>
<th >
Operation
</th>
<th >
Material Typ
</th>
<th >
Batch and weight
</th>
<th>
Output length
</th>
</thead>
<tbody>
<tr>
<td>
2021-03-28
</td>
<td>
I
</td>
<td>
<input type="text" style="width: 90px;"> <br>
<input type="text" style="width: 90px;">
</td>
<td>
1
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
2530
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
2
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
3020
</td>
</tr>
</tbody>
</table>
</body>
</html>
Styling is from another answer on the portal, but i don't now how remove space between main table and nested.
Can some one help me whit styling? I'm learning python and don't now JS
You will have to remove the padding in the columns that has a sub table and have some fixed width on the columns.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
vertical-align: top;
}
.table-inner td {
padding: 0;
}
.table-inner {
border: none;
}
.table-inner tr:first-child td {
border-top: none;
}
.table-inner tr:last-child td {
border-bottom: none;
}
.table-inner td:first-child {
border-left: none;
}
.table-inner td:last-child {
border-right: none;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.no-border {
border: none;
}
.p-0 {
padding: 0 !important;
}
input[type=text] {
width: 100%;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th style="min-width: 120px; width: 120px">Date</th>
<th style="min-width: 80px;width: 80px">Zm</th>
<th style="min-width: 90px;width: 90px">Service</th>
<th style="min-width: 80px;width: 80px">Pozition</th>
<th style="min-width: 150px;width: 150px">Operation</th>
<th style="min-width: 150px;width: 150px">Material Typ</th>
<th style="min-width: 170px; width: 170px">Batch and weight</th>
<th style="width: auto">Output length</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-03-28</td>
<td>I</td>
<td class="p-0">
<input type="text" style="width: 90px;"><br />
<input type="text" style="width: 90px;">
</td>
<td>1</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>2530</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>3020</td>
</tr>
</tbody>
</table>
</div>
I know that it's been an ongoing discussion, and that float:right is supposed to be the answer to avoiding the use of tables for formatting, but I can't seem to figure out how to do the following without tables. The labels will change based on language, so fixed widths can't be used.
I can't seem to get float:right to work when the inputs are different widths. Here's the HTML I used with a table...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<style>
.left {
width:1%;
white-space:nowrap;
text-align:right;
padding-right: 5px;
}
</style>
<form>
<table
width="400">
<tr>
<td class="left">Name:</td>
<td>
<input
type="text"
style="display:table-cell; width:100%"/>
</td>
</tr>
<tr>
<td class="left">Telephone Number:</td>
<td>
<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 40px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input
type="checkbox"
/>Okay to leave the package without a signature.
</td>
</tr>
<tr>
<td valign="top" class="left">Delivery Notes:</td>
<td>
<textarea
rows="5"
style="display:table-cell;
width:100%"
></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks.
I have a text input in a data cell, and a header cell of the same column. I expect the hierarchy of calculating width would be header >> column >> text-input, since there's no explicit width setting of text-input. But it turns out the text input has a default width which makes it wider than the header, and thus determines the width of the column.
This the link to the code
.style-table {
text-align: left;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
http://jsfiddle.net/ricecakebear/5686z44L/.
So how do I remove the default width of the text input, and let header determins the width of the column? Thanks.
input has a browser default of size = "20"
Add size = "1" to the input to reset this.
In addition, include your original css (width = 100%). This will allow the input to expand to match the th.
Also include box-sizing property to account for border (or reset this instead)
fiddle
table {
border-collapse: collapse;
}
.style-table {
text-align: left;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" size="1" />
</td>
</tbody>
</table>
<br>
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>A longer heading</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" size="1" />
</td>
</tbody>
</table>
You can add width in th as you want
.style-table {
text-align: left;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th width="60%">gears</th>
<th width="40%">rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
You are using width:100%; for your input, you are not limiting the width of your column td.
So the input will take the default width.
.style-table {
text-align: left;
}
.style-input-td{
width:50px;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
I'm trying to center the content in my body tag in a simple HTML page. I want the body to be 100% width, i have a container div inside of it with a set width, i want the container to be in the center of the screen.
I tried to set the margin to 0 auto; does not work, tried to set align="center" in the body tag, doesnt work.
Here is my page, as you can see it's not in center: http://jsbin.com/vifekivatabo/1/
What am i doing wrong?
Hey you forget to this
Define
your .container1 margin:0 auto;
.container1{
margin:0 auto;
}
Try thhis to your container class:
.container
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container1 {
max-width: 600px;
width: auto;
margin:0 auto;
text-align:center;
}
ADD
margin:0 auto;//to center the page
text-align:center;
Fiddle
http://jsfiddle.net/7c9wjLy6/1/
No problem with margin:0 auto;
here
.container1{
margin:0 auto;
}
Just put<center> before starting the div and </center> after closing the div.
Like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
body {
width: 100%;
font-family: Arial, Verdana;
margin: 0 auto !important;
padding: 0;
}
.container1 {
max-width: 600px;
width: auto;
}
.inner {
max-width: 60%;
width: auto;
margin: 0 auto;
}
.round {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin: 0 auto 0 auto;
padding: 5px;
border: 2px solid #f4f3ee;
background: #ffffff;
}
.auto-style1 {
font-size: xx-small;
}
</style>
</head>
<body>
<center>
<div class="container1">
<img alt="l" src="~/xxx.png" />
<div id="acceptMsg" class="inner">
<b>Welcome to the xxx mobility enrollment page.</b>
<br />
<p>dasdasd</p>
<br />
<br />
<div>
#* <select name="DL_MarketChooser" id="DL_MarketChooser" style="width:40%;">
<option selected="selected" value="Choose Region">Choose Region</option>
<option value="https://connect.molnlycke.com/ssp/hq">Temporary Enrollment</option>
</select>*#
<table id="loginTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="middleRow">
<td class="firstColumn">Username:</td>
<td class="secondColumn">
<input type="text" id="userID" size="11" value="">
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Password:</td>
<td class="secondColumn">
<input type="password" id="Password" size="11" value="">
</td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performAuth()" tabindex="0">Login</button>
</td>
</tr>
</tbody>
</table>
<table id="registerTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="firstRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isPDA" tabindex="0"><label for="gwt-uid-1">My device has no phone number</label></span></td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Country:</td>
<td class="secondColumn">
<select tabindex="0" id="countrySelect">
<option value="+46">Sweden</option>
<option value="+83">United States</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td class="inline-label">Country<br>
Code</td>
<td class="inline-label">Prefix and Number<br>
(no space, no leading zero)</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Mobile:</td>
<td class="mobile-cell secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td>
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="countryCode" size="1" disabled="" value="+46"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="phoneNumber" size="11"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Platform:</td>
<td class="secondColumn">
<select tabindex="0" id="platformSelect">
<option value="no">-Select-</option>
<option value="A">Android</option>
<option value="I">iOS</option>
<option value="W">Windows Phone</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isEmp" tabindex="0" checked=""><label for="isEmp">I own this device</label></span></td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performRegister()" tabindex="0" id="registerButton" disabled>Register</button>
<button type="button" tabindex="0">Clear</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p style="text-align: center" class="auto-style1">
Application Version 1.5<br />
</div>
</center>
</body>
</html>
I've also created a CodePen and a JsFiddle for you.