HTML
<table class="table " >
<thead >
<tr>
<th>
Product
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody >
<tr>
<td >
torch
</td>
<td>
<input type="text" class="form-control" id="amountC" name="amountC" autocomplete='off' style="outline: none;
border:none !important;
box-shadow:none !important;">
</td>
</tr>
</tbody>
<thead>
<tr>
<th>
<input type="text" style="float:left" name="" id="couo" placeholder="hi" class="form-control" />
</th>
<th>
<div>
<input type="button" style="padding:5px 12px" name="btnC" id="btnC" class='btn btn-info' value="coupon" />
</div>
</th>
</tr>
<tr>
<th>
Amount to be paid
</th>
<th>
<input type="text" class="form-control" id="amountT" name="amountT" autocomplete='off' style="outline: none;
border:none !important;
box-shadow:none !important;"> </th>
</tr>
</thead>
</table>
I have this HTML in which there are borders in this table.I want to completely remove all the borders inside the table.I tried editing the css.But I cant do that..
here is the fiddle
did u tried this
<style>
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
border: none!important;
}
</style>
this must help you
check this http://jsfiddle.net/spk063/Gz49L/4/
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>
Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.
I'm working on a project where I need to change existing Boostrap2 table responsive. I made a fiddle
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
</tr>
</table>
This is all there is to it. A wrapper:
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="responsive-table">
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
<td>
<input name='age' class="member-birthday input-small" ng-class="member.preloaded" type="text" name="birthdate##$index + 1##" id="birthdate##$index+1##" placeholder="mm/dd/yyyy" ui-mask="99/99/9999" ui-mask-use-viewvalue="true" ng-model="member.birthday" date-check mtype="##member.type##" order="##$index##" popover="##member.errorMsg##" trigger-click="##member.errorMsg##" popover-trigger="blur" popover-placement="right" required test-check="##$index##">
</td>
<td>
<label for="tobacco## member.id ##" class="aria-hidden hide">Usage
</label>
<input class="tobacco-input" type="checkbox" name="tobacco## member.id ##" id="tobacco## member.id ##" ng-disabled="member.disableTobacco" />
</td>
<td>
<label for="nativeAmerican## member.id ##" class="aria-hidden hide"> Native
</label>
<input class="coverage-input" type="checkbox" name="nativeAmerican## member.id ##" id="nativeAmerican## member.id ##" ng-model="member.nativeAmerican"/>
</td>
<td>
<label for="coverage## member.id ##" class="aria-hidden hide">
Coverage
</label>
<input class="coverage-input" type="checkbox" name="coverage## member.id ##" id="coverage## member.id ##" ng-model="member.seekingCoverage" ng-click="seekCoverage($index)"/>
</td>
<td class="removebtn">
<a href="javascript:void(0);" ng-show="member.removable" ng-click="remove($index, member.type)" class="btn btn-mini">
<spring:message code="label.iex.prescreen.remove" javaScriptEscape="true"/>
</a>
</td>
</tr>
</table>
</div>
I changed the structure and added some grid classes from Bootstrap3. I got the expected result
I have a table (using Bootstrap 3.0) with an input field in each cell
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table id="itemTable" border="1" class="table table-bordered table-striped">
<thead>
<tr>
<th >Quantity</th>
<th>Unit</th>
<th>Material Name</th>
<th>PO Vatable</th>
<th>PO TAX</th>
<th>PO Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" min="1" class="form-control" name="Quan[]">
</td>
<td>
<select id="BX_gender" name="Unit[]">
<option>Kg</option>
<option>Piece</option>
<option>Meter</option>
<option>Pound</option>
<option>Gram</option>
<option>Feet</option>
</select>
</td>
<td><input type="text" name="Material[]"> </td>
<td><input type="number" step="0.01" class="small" name="POVATABLE[]"> </td>
<td><input type="number" step="0.01" class="small" name="POTAX[]"> </td>
<td><input type="number" step="0.01" class="small" name="POTOTAL[]" onkeyup="onRequestTotalModification(this.parentNode.parentNode.rowIndex)"> </td>
</tr>
</tbody>
</table>
I'm trying to set the input to have the width & height of the cell containing it, but nothing is working (even inline styling).
I organized the table using thead and tbody tags, but it didn't fix anything
If you're trying to have your input be the entire cell you need to remove bootstraps default padding on TD elements.
https://jsfiddle.net/2ay5yuq3/2/
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
padding:0;
}
I want to do some things with my table but I think an image would sum it up as my english is not the best.
I want to first move the second button to the left. Just one button on each corner on top of my table.
And secondly I want to avoid my input textbox (or a button later) to resieze the whole row of the 2nd header.
Any help will do. I can't figure it out by myself.
Code
#Html.ActionLink("Reset filters", "Index",
null,
new { #class = "btn btn-success custom", #style = "color:white", #role = "button" }
)
<button class="btn btn-default custom" type="submit"><i class="glyphicon glyphicon-file"></i> Export to Excel</button>
<div style="padding-top: 12px"></div>
#using (Html.BeginForm("Index", "Materials", FormMethod.Get))
{
<div id="grid-list">
#{ Html.RenderPartial("_AjaxMaterialList", Model); }
</div>
}
Partial View Code
#using PagedList.Mvc <!--import this so we get our HTML Helper-->
#model IPagedList<eContentMVC.Models.Material>
<!-- import the included stylesheet for some (very basic) default styling -->
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#*<div style="padding-top: 14px"></div>*#
<div class="panel panel-primary filterable" style="padding: 0px;
margin: 0px">
<div class="panel-heading">
<h3 class="panel-title">GDS eContent Master Data Service Tool</h3>
</div>
<table class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th class="centerAlign" style="width:14%">Brand</th>
<th class="centerAlign" style="width:25%">Category</th>
<th class="centerAlign" style="width:13%">Language</th>
<th class="centerAlign" style="width:7%">BCO</th>
<th class="centerAlign" style="width:9%">Material Cod</th>
<th class="centerAlign" style="width:7%">Derivation</th>
<th class="centerAlign" style="width:7%">Artwork</th>
<th class="centerAlign" style="width:7%">Delivery</th>
<th class="centerAlign" style="width:5%">Export</th>
</tr>
<tr>
<th class="centerAlign" style="height:4%"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
</tr>
</thead>
<tbody>
// Content
</tbody>
</table>
</div>
<div class="centerAlign" style="padding: 0px; margin: -8px">
<!-- output a paging control that lets the user navigation to the previous page, next page, etc -->
#Html.PagedListPager(Model, page => Url.Action("Index", "Materials", new
{
brand_name = Request["brand_name"],
page
}))
</div>
This is the code for making the table looking the right way. For the button, use bootstrap's pull-right.
* {
box-sizing:border-box;
}
.mytable tr th{
height:42px;
}
.mytable input{
width:100%;
}
.mytable th:nth-of-type(1){
width:14%;
}
.mytable th:nth-of-type(2){
width:25%;
}
.mytable th:nth-of-type(3){
width:13%;
}
.mytable th:nth-of-type(4),.mytable th:nth-of-type(6),.mytable th:nth-of-type(7),.mytable th:nth-of-type(8){
width:7%;
}
.mytable th:nth-of-type(5){
width:9%;
}
.mytable th:nth-of-type(9){
width:5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">GDS eContent Master Data Service Tool</h3>
</div>
<table class="table table-bordered table-hover mytable">
<thead>
<tr>
<th class="centerAlign">Brand</th>
<th class="centerAlign">Category</th>
<th class="centerAlign">Language</th>
<th class="centerAlign">BCO</th>
<th class="centerAlign">Material Cod</th>
<th class="centerAlign">Derivation</th>
<th class="centerAlign">Artwork</th>
<th class="centerAlign">Delivery</th>
<th class="centerAlign">Export</th>
</tr>
<tr>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
</tr>
</thead>
</table>
</div>
<div class="centerAlign" style="padding: 0px; margin: -8px"></div>
If it helps, +1.
Without the real page i'm not sure, but:
To move the button on the right use bootstrap class pull-right.
To have every row at the same height. I think td have some padding inside. Put padding to 0 and fix the height in css
.table td {
height: 30px;
vertical-align: middle;
}
Or something like this