I have a table in html bootstrap, the table looks fit when the page loads, but after the page loads fully the table becomes scrollable
My code is:
<div class="table-responsive">
<table class="table table-striped table-borderd" id="orderTable">
<thead>
<tr>
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr class="sn">
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
Can anyone please tell me how to make it fit to the screen and avoid the scrolling. Thanks in advance
As it turns out, Main issue in this case is the width of the <input/> elements which was making all our columns follow the same width.
I have solved it with the following CSS for Desktop Screen. For smaller screens, it is best to have the scroll for us to not loose any of our data.
#media (min-width:1320px{
tfoot th input {
width: 90px !important;
}
}
Later you can adjust this for even larger screen break point as per your requirement.
Related
I would like to have a table on my website that is a fixed size and allows for scrolling. Right now the table takes up the entire page because it has many rows of data. I want to limit the height and make the table scrollable so it does not take up the whole page. Here is my code for the table. I tried to wrap the table in a div and set overflow: auto but that did not seem to work.
<table class="table table-dark">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
Set table height fixed. Something like 300px or so. It makes a virtical scroll bar
Try follow code
<table class="table table-dark table-responsive" style="height:500px;width:100%">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
I am using this react-bootstrap table:
which it's HTML code is:
<Table striped bordered hover>
<thead>
I was trying to add the code here.
<tr>
<th>#</th>
<th>App</th>
<th>Domain Name</th>
<th>Pub Account ID</th>
<th>Relationship</th>
<th>Certification ID</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox" id={'checkboxThick'+network.id} onClick={()=>this.checkCheckbox(network.id)}/></th>
<td>{network.product}</td>
<td>{network.domain_Name}</td>
<td>{network.publisher_Id}</td>
<td>{network.relationship}</td>
<td>{network.certification_Id}</td>
<td>{network.lastUpdate}</td>
<td className="actionCoulmn">
</td>
</tr>
</tbody>
</Table>
And I need to add this div as a part of the table:
I was trying to add some divs and styles to the <tr> and <th> with no success.
Does someone have any idea how to deal with it?
You could settle with this:
<div id="parent">
<div /> // your div here
<table /> // your existing table component
</div>
and use styling to merge them
I have this table, but elements at last column don't fit the entire table when display is in a big size. What am I doing wrong?
Large
Medium
Small
I have
<div class="panel-body">
<table class="table mb30" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="40%">Site URL</th>
<th width="25%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>URL</td>
<td>Action</td>
</tr>
</tbody>
</table>
</div>
I've put together a fiddle
You need <meta name="viewport" content="width=device-width"> in the header.
then use:
#media screen and (max-width : 725px ){
#id {}
.class {}
}
change max-width to what you want.
Don't give the action column a percentage width. If you give table headers a percentage that adds up to the total and leave out a column, all the % based columns will take up as much room as they have available.
https://jsfiddle.net/pkjbpsr7/1/
For example:
<tr>
<th width="5%">#</th> <!-- This column and the next two will fill the space available. -->
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th>Action</th> <!-- This one will just chill off to the side and only take up as much room as it has width -->
</tr>
If you need it to take up a certain amount of space, you can always give it a min-width:
https://jsfiddle.net/pkjbpsr7/4/
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th id="min-width">Action</th> <!-- This will take up 100px per it's min-width -->
I'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center
It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.
try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;
I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>