I have a table with this
<table class="table table-striped table-bordered table-hover ">
<thead>
<tr>
<th>
Network Name
</th>
<th>
Abbreviated
</th>
<th>
Description
</th>
<th>
Has Channel
</th>
<th>
IsActive
</th>
<th>Action</th>
</tr>
</thead>
</table>
The output I am getting is like this
I want each of them to be alligned left.
How to do it?
In your browser, right-click one of the table header texts (i.e. “Network name“), click "Inspect element". In the newly opened Developer Tools, click the “Styles“ window.
In the "Styles" tab you can find all rules that are applied to the selected element. One of these rules will contain said text-align: right;. That's the rule that you want to overwrite, i.e. by being more specific than the mentioned rule.
Example
you have a general rule for the table header as in your mentioned case.
table {
width: 300px;
border: 1px solid black;
}
table tr th {
text-align: right;
}
<table>
<tr>
<th>Row header</th>
</tr>
<tr>
<td>Row data</td>
<tr>
</table>
Being more specific can be achieved by using an ID or class, I'll use a class in my example:
table {
width: 300px;
border: 1px solid black;
}
/* existing rule just for illustration */
table tr th {
text-align: right;
}
/* more specific than above rule */
table.left-header tr th {
text-align: left;
}
<table class="left-header">
<tr>
<th>Row header</th>
</tr>
<tr>
<td>Row data</td>
<tr>
</table>
Lets assume your code is working and your bootstrap css is working.. then it should be in one line aligned left but in your case if not Bootstrap has a class that could do it : class="text-left"
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<table class="table table-striped table-bordered table-hover pull-left">
<thead>
<tr>
<th class="text-left">
Network Name
</th>
<th class="text-left">
Abbreviated
</th>
<th class="text-right">
Description
</th>
<th class="text-left">
Has Channel
</th>
<th class="text-left">
IsActive
</th>
<th class="text-left">Action</th>
</tr>
</thead>
</table>
i would not prefer adding the class to each th but its a solution since you dont really provide code to work with.
Description is aligned right just to give you an idea of whats happening. just by adding classes using bootstrap.
text-align: left;
This property is used for aligning text left. Kindly inspect and find the class which has text-align: right; and change it.
You can add a class to th element then style the class:
<th class="align-to-left">
.align-to-left{
text-align:left;
}
Related
I have a Table and in the <thead> I have a background image, I have a coubple of rows and <th> this is the structure of my markup:
(Im using bootstrap by the way)
<table className="table">
<thead>
<tr>
<th colSpan="12">
<h3 className="table-title">POST APOCALYPTIC HIGHWAY</h3>
</th>
</tr>
<tr className="attributes">
<th className="position"></th>
<th className="img d-none d-sm-table-cell"></th>
<th className="fullname"></th>
<th className="bib text-center">Bib</th>
<th className="age d-none d-sm-table-cell text-center">
Age
</th>
<th className="gender text-center">Gender</th>
<th className="time text-center">Time</th>
<th className="score text-center">Score</th>
</tr>
{/** Ghost row to simulate margin */}
<tr style={{ height: "10px" }}>
<th colSpan="12"></th>
</tr>
</thead>
Im applying a background image through CSS to the <thead> this way:
.leaderboard thead {
background-image: url(./images/black-square-pattern.jpeg);
background-repeat: repeat;
color: #fff;
}
I also make sure there's 0 padding and margin in the <th> elements
.leaderboard thead th {
padding: 0;
margin: 0;
border: none;
}
It looks okay in desktop but for some reason when I test it in Google chrome inspecter the different mobile previews I see some tiny white spaces between the cells, I cannot find why it's happening, any idea how to fix it? I also tested in Safari and the same happens.
I'm using bootstrap 5 to create responsive tables which works fine but when one column has a lot of text all other columns get squished making it look weird. I would like to set it so that the columns with smaller amounts of texts and the table headers to not get cut off. I also have the table set to responsive which in bootstrap's css sets overflow-x: auto.
Picture of what the table looks like on mobile
Second Picture of mobile
Picture of what it looks like on pc
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<div class="container">
<div class="table-responsive">
<table class="table table-sm table-bordered table-hover">
<thead class="table-warning">
<tr>
<th scope="col">Ticket ID</th>
<th scope="col">Asset Type Or User</th>
<th scope="col">Asset Tag</th>
<th scope="col">User ID</th>
<th scope="col">Name</th>
<th scope="col">Location</th>
<th scope="col">Description</th>
<th scope="col">Date Added</th>
<th scope="col">Priority</th>
<th scope="col">Mark As Done</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4</th>
<td>computer</td>
<td>C-Place-Holder</td>
<td>NA</td>
<td>Tom Blow</td>
<td>In Health Building, Bottom Floor</td>
<td>User would like to print color, has missing files, and monitor is flickering.</td>
<td>2021-02-24</td>
<td>3</td>
<td>
<button class="btn btn-primary" id="4" onclick="markDone(4)">Done</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
To make it 100% you have to add this command to your CSS
.table-responsive { display: table; } but this won't work for smaller screens. You have to use media queries for that.
Hope my answer helps you.
How do I go about making the 'description' column responsive? As you can see the bootstrap description is pushing my site. I would like the description go for a specific width, and the text to go behind the 'language' and have just one horizontal scroll bar for all of the description column.
I'm using bootstrap btw so the code doesn't contain a css but maybe it helps you anyway :)
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>{data.map(item => (
<tr key={item.id}>
<td><a href={item.html_url}>{item.name}</a></td>
<td>{item.description}</td>
<td>{item.language}</td>
<td>{item.created_at.slice(0,10)}</td>
<td>{item.size}</td>
<td>{item.open_issues}</td>
</tr>
))}</tbody>
</table>
</div>
You can define a class with some CSS as below:
.fixed-width {
width: 400px;
display: block;
overflow-x: auto;
}
then add class fixed-width to all <th> and <td> tags in your "description" column.
Use this CSS.
.table {border-collapse:collapse; table-layout:fixed; width:310px;}
.table td {width:100px; /*add as per your requirements*/ word-wrap:break-word;}
Using Child Pseudo Or Unique Id OR Class.
Set as per screen required. Using #media.
I modified the previous answer a bit and add the .fixed-width class only on the column containing the description
.fixed-width {
max-width: 400px;
display: block;
overflow-x: scroll;
}
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>
<tr key="1">
<td>Google</td>
<td class="fixed-width">some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong description here</td>
<td>English</td>
<td>19/01/2021</td>
<td>38</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
You can define your css Like this:
tbody tr td:nth-child(2) {
width: 245px;
overflow-x: scroll;
max-width: 245px;
}
I only know the basics of CSS so not sure how to go about this. I have a table with mostly 1-line data, but the last cell, called "Other", in my first row has multiple lines
Is there a way to make the height small for every cell in the table except that one cell? Right now, because the column with multiple lines is so large, it's making the rest of the cells have extra white space above and below the data (see first screenshot). When I change line-height of the td it makes the whole table look nice except for that one cell with multiple lines (see second screenshot)
without line-height:
with line-height added:
html (i've left out some td's to make it look cleaner):
<table class="table">
<thead>
<tr>
<th scope="col">Something</th>
<th scope="col">Code Version</th>
<th scope="col">Region</th>
<th scope="col">Something</th>
<th scope="col">Something</th>
<th scope="col">Something->Membership</th>
<th scope="col">SBMO</th>
<th scope="col">Something</th>
<th scope="col">IVR</th>
<th scope="col">CPM Something</th>
<th scope="col">Other</th>
</tr>
</thead>
<tbody>
<!-- start loop for mongodb collection: environments-->
<% environments.forEach(function(environment){ %>
<tr>
<td>
<%= environment.something %>
</td>
<td>
<%= environment.codeVersion %>
</td>
<td>
<%= environment.region %>
</td>
<!-- other td's go here --->
<!-- CELL WITH MULTIPLE LINES: -->
<td class="other">
<%= environment.other %>
</td>
<%}); %> <!-- end loop for environments -->
</tr>
</tbody>
</table>
css:
.table td {
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
border-right: 1px solid #d4d4d4;
}
other {
white-space: pre-wrap;
}
Rowspan probably won't do what you want either. However, there is an alternative but it isn't pretty.
Wrap the content in a div, set its height and set overflow:scroll. This will give the content a scroll bar that the user can scroll up and down.
Below is just an example, so you would want to play with the height to display how you want it to.
<style>
.other{
height:50px;
overflow:scroll
}
</style>
<td>
<div class="other">
content goes here.
</div>
You can also truncate the text (and add an ellipsis) to show that there is more content that what it is shown.
Added simple bonus is that if you add a title attribute to the cell, the full contents of the cell can be shown as kind of like a tooltip
See demo below:
table {
box-sizing: border-box;
border-collapse: collapse;
max-width: 800px;
}
table td,
table th {
vertical-align: middle;
border: 1px solid #d4d4d4;
width: 100px;
max-width: 300px;
}
td.other {
overflow: hidden;
max-width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
}
<h2>sample</h2>
<table class="table">
<thead>
<tr>
<th scope="col">Something</th>
<th scope="col">Code Version</th>
<th scope="col">Region</th>
<!--
<th scope="col">Something</th>
<th scope="col">Something</th>
<th scope="col">Something->Membership</th>
<th scope="col">SBMO</th>
<th scope="col">Something</th>
<th scope="col">IVR</th>
<th scope="col">CPM Something</th>
-->
<th scope="col">Other</th>
</tr>
</thead>
<tbody>
<!-- start loop for mongodb collection: environments-->
<tr>
<td>
something
</td>
<td>
version
</td>
<td>
region
</td>
<!-- other td's go here --->
<!-- CELL WITH MULTIPLE LINES: -->
<td class="other" title="other (multi-line) - this is a very long line that should not wrap around the td">
other (multi-line) - this is a very long line that should not wrap around the td
</td>
<!-- end loop for environments -->
</tr>
</tbody>
</table>
I was trying to set up a table with a fixed header which works fine on all tables except the admin table.
showntable:
<div class="table-responsive">
<table class="table table-bordered" id="showntable">
<thead>
<tr>
<th> Business Unit</th>
<th> Product Group</th>
<th> Device</th>
<th> Serial number</th>
<th> Location</th>
<th> Available?</th>
<th> Condition</th>
<th> Calibration Date</th>
<th> Info</th>
<th> Book</th>
</tr>
</thead>
<tbody id="contents">
<?php echo fill_table($connect); ?>
</tbody>
</table>
</div>
bookedtable:
<div class="table-responsive">
<table class="table table-bordered" id="bookedtable">
<thead>
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>From</th>
<th>Until</th>
<th>Edit Comment</th>
<th>Edit Booking</th>
</tr>
</thead>
<tbody>
<?php echo fill_book($connect); ?>
</tbody>
</table>
</div>
admintable:
<div class="table-responsive">
<table class="table table-bordered" id="admintable">
<thead>
<tr>
<th>Business Unit</th>
<th>Product Group</th>
<th>Device</th>
<th>Serial Number</th>
<th>Condition</th>
<th>Calibration Date</th>
<th>Comment</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php echo fill_admin($connect); ?>
</tbody>
</table>
</div>
CSS:
thead {
display: table;
width: calc(100% - 17px); /* -17px because of the scrollbar width */
}
tbody {
display: block;
max-height: 55vh;
overflow-y: scroll;
}
#showntable th, #showntable td {
width: 10%;
overflow-x:scroll;
}
#bookedtable th, #bookedtable td {
width: 10%;
overflow-x:scroll;
}
#admintable th, #admintable td {
width:10%;
overflow-x:scroll;
}
th {
text-align: center;
}
td {
text-align: center;
}
The #showntable consists of 10 columns, the #bookedtable of 6 and the #admintable of 8 columns. Somehow the width of 10%
for the th and td of the former two seem to work and take up the entire width but the admin table only seems to broaden
when I put the width as 1% for some reason. The thead is correct but the td seems to make problems.
How can I make the admin table the same size?
Also when I resize the browser window to be smaller the columns don't stay the same size. Do you know how to fix these issues?
Cheers
Edit:
Js Fiddle: http://jsfiddle.net/d7crasvh/23/
Its looks fine in Firefox but in IE and Edge it has some issues... :(
Instead of the admin table being wonky as described in the problem it's now the shown table that looks wrong. also the tables are all not aligned, the header and the body i mean