There are two tables in the below example. Width is not set for the columns. I dont want the fixed width for the columns in two tables. I want to make columns width same depending upon the dynamic text generated. I am using angularjs and html for this. Here is the plunkr - https://plnkr.co/edit/AhS2AmL5O6QxZaHNAzPp?p=preview
html-
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<div class="row">
<div class="col-md-9">
<div class="tableheight">
<table class="table-nested childtable">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
</th>
<th class="cell-members">
Version
</th>
<th class="cell-members">
Size
</th>
<th class="cell-members">
Modified By
</th>
<th class="cell-members">
Labels
</th>
<th class="cell-members">
Description
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="'table_tree.html'" data-ng-repeat="item in list"></tbody>
</table>
</div>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name top-border" ng-if="level && level > 1">
<span style="padding-left: 30px" > <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}} </span>
</td>
<td class="cell-name top-border" ng-if=" (!level && level <= 1 ) || (level && level <= 1)">
<span style="padding-left:11px" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-name top-border" ng-if="!level">
<span class="indent" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-members">
{{item.Version}}
</td>
<td class="cell-members">
{{item.Size}}
</td>
<td class="cell-members">
{{item.ModifiedBy}}
</td>
<td class="cell-members">
{{item.Labels}}
</td>
<td class="cell-members">
{{item.Description}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="6">
<table class="childtable">
<tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
</div>
</div>
</body>
</html>
I think this is what you want, change width into max-width:
.table-nested .cell-name {
max-width: 15rem;
/*width: 60%;*/
}
don't forget to comment out the width.
See plnkr: https://plnkr.co/edit/gYWusE9tqMX6D76bhcmW?p=preview
You can also use 60%. so: max-width: 60%
If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:
<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>
Related
The page I'm working on needs a collapsible element which I implemented with a Bootstrap horizontal collapse. In it there is a table. As the collapse collapses the table squishes and increases in height, both the table itself and each row, meaning the transition doesn't look smooth. This is especially noticeable when the element un-collapses since the rows don't resize till the collapse is fully expanded.
How do I keep the table consistent during the animation?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020+</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
The solution was apparently keeping the inline styling Bootstrap provides, namely style="width: 300px;" for the card-body.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body" style="width: 300px;">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020+</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
<td>
<input type="radio" />
Radio Button
</td>
</tr>
<tr>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
< div>
< input type="button" />
</div>
</td>
</tr>
</table >
<table >
<tr>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw" >< / i >Table
< /div >
< /div>
< /div>
< !-- /.panel-heading -->
< div class="panel-body">
< div class="dataTable_wrapper">
< table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxxx">
</table>
</div>
</div>
</div>
</div>
< /div>
</td>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw"></i>Table
< /div>
< /div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxasdxx">
</table>
< /div>
< /div>
< /div>
< /div>
< /div>
</ td>
< /tr>
< /table>
My 2 Images bellow:
Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class=" col-sm-12 form-group">
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
</div >
<div class=" col-sm-12 form-group ">
<div class=" col-sm-2">
<input type="text" class="form-control" id="usr">
</div>
<div class=" col-sm-2">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Or See the below fiddle for a better look
table design demo fiddle (updated)
You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.
table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.
When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.
.custom-margin {
margin-top: 10px;
margin-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
</label>
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
</label>
</div>
<div class="custom-margin">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Enter Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
</div>
</div>
I am using Bootstrap and have a part in my code that is:
<table class="table">...</table>
In my header, I have the tag <meta name="viewport" content="width=device-width"> This actually works fine(I can see the whole table on my website) but when I add <meta name="viewport" content="width=device-width initial-scale=1"> like is suggested on many websites, my table doesn't fit the 320 px width viewport that I have been using to test and I have to scroll to see the whole table.
Further investigation and playing around with the css for .table shows that I can't manually set width below 385 px. I have tried searching "bootstrap table 385 px" but it doesn't seem like there is anything special about this number so I am wondering why the table can't be smaller. Does anyone have any ideas as to how I can make the table smaller or make it scale correctly to initial-scale=1?
Edit #1:
<table class="table">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td width=70%>
<input class="form-control" ng-model="...">
</td>
<td>
<button class="btn btn-primary" ng-click="...">...</button>
</td>
</tr>
<tr ng-repeat="... in ...">
<td class="claimedby-{{...}}">
<input type="checkbox" ng-model="..." ng-click="..."> {{...}}
</td>
<td>
<input type="checkbox" ng-model="..." ng-click="..."> ...
</td>
<td>
<div for="...">
<div class="...">{{...}}</div>
</div>
</td>
<td>
<button class="btn btn-danger" ng-click="...">...</button>
</td>
</tr>
</tbody>
</table>
Sorry for the "..." in certain places. I'm not sure if we're allowed to post exact code publicly. Hopefully this is enough to see what's going wrong though.
Here, this should do it for you
<table class="table">
<thead>
<tr>
<th class="col-md-4 col-xs-2">Col1</th>
<th class="col-md-4 col-xs-2">Col2</th>
<th class="col-md-4 col-xs-8">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input class="form-control" ng-model="...">
</td>
<td>
<button class="btn btn-primary" ng-click="...">...</button>
</td>
</tr>
<tr ng-repeat="... in ...">
<td class="claimedby-{{...}}">
<input type="checkbox" ng-model="..." ng-click="..."> {{...}}
</td>
<td>
<input type="checkbox" ng-model="..." ng-click="..."> ...
</td>
<td>
<div for="...">
<div class="...">{{...}}</div>
</div>
</td>
<td>
<button class="btn btn-danger" ng-click="...">...</button>
</td>
</tr>
</tbody>
</table>
Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header.
<thead>
<tr>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
</tr>
</thead>
However the inputs expand to their max width with no regard to col-size.
http://jsfiddle.net/m79HR/
Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.
Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?
Just add the "form-control" class to the inputs and bootstrap takes care of the rest.
Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.
<table class="table table-condensed">
<thead>
<tr>
<th class="col-sm-12 col-md-4">Large</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
</tr>
</tbody>
</table>
You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Very Small</th>
<th>Very Small</th>
<th>Very Small</th>
<th>Large</th>
<th>Small</th>
<th>Medium</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-4">
<input class="col-sm-12" placeholder="col-sm-4" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" placeholder="col-sm-2" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" placeholder="col-sm-3" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
For Bootstrap 4, you need to additionally add the d-flex class to the rows, like
<table>
<thead>
<tr class="d-flex">
<th class="col-3">3 columns wide header</th>
<th class="col-sm-5">5 columns wide header</th>
<th class="col-sm-4">4 columns wide header</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3">3 columns wide content</th>
<td class="col-sm-5">5 columns wide content</th>
<td class="col-sm-4">4 columns wide content</th>
</tr>
</tbody>
</table>
Please find the working sample code as below. This code contains 1 sample html table having 1 record.But this logic if i try to implement in my project having knockout binding , its not working.Kindly suggest me some options to re-size table columns having knockout binding. I tried jQuery Plugin but it was not working with knockout binding.
colResizable demo
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/colResizable.js"></script>
<script type="text/javascript">
$(function(){
$("#examTable").children().colResizable();
});
</script>
</head>
<body>
<div id="patientInfo">
<div id="examTable" style="width: 100%;">
<table cellspacing="0" id="WLcolumn-header-table" style="width: 100%;">
<thead>
<tr id="WLheaderRow">
<th w="1.3" style="width: 5.2%;" ><a class="select"></a></th>
<th w="6" style="width: 22%;">Student Name <img class='' ></th>
<th w="3" style="width: 12%;">Student ID <img class='' ></th>
<th w="2" style="width: 8%;">Date <img class='image-arrow-up' ></th>
<th w="3" style="width: 12%;">ABC # <img class='' ></th>
<th w="4" style="width: 14%;">Description <img class='' > </th>
<th w="2" style="width: 10%;">Teacher <img class='' ></th>
<th w="2" style="width: 8%;">Class <img class='' ></th>
<th w="2" style="width: 10%;">Status <img class='' ></th>
</tr>
</thead>
<tbody >
<tr >
<td id="check_selected" style="width: 5.2%;">
<a >1</a>
</td>
<td style="width: 22%;" >xyz</td>
<td style="width: 12%;" >zyz111</td>
<td style="width: 8%;" >12-12-1912</td>
<td style="width: 12%;" >Acc121</td>
<td style="width: 14%;" >HELLO</td>
<td style="width: 10%;" >me</td>
<td style="width: 8%;" >ECE</td>
<td style="width: 10%;" >ACTIVE</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div class="sampleText">
<label id="sample2Txt">Drag the columns to start</label>
</div>
<br/><br/>
</div>
</body>
</html>
To give a max-height to cell contents you'll need to wrap it in another element (e.g. a div). In addition, I'd recommend using the style binding, like this:
<td>
<div data-bind="text: rowInfo[colInfo.DataColumn],
style: { width: Width, height: '30px' }"></div>
</td>
See this fiddle for a working demo.
Or you can try this
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>