Topic: Column width in tables is not behaving as expected

Anastassia Etropolski free asked 5 years ago


I'm trying to add a table to my website where the column width is not simply determined by the text width, and I saw on another website that you can do this in bootstrap using the same 12 cell system you use for grids. (See here) When I added this sample table to my code, however, it did not behave at all like expected. Instead of creating columns of equal width, it squished the last three columns and filled in the rest of the room with the first column. I created a clean test page to see if it was something else in my code that was causing it to misbehave, but it still gave me trouble. Since it had no dependence on MDB and was just a general bootstrap issue, I was going to post it online and decided to use the CDN link for the bootstrap.min stylesheet so that it wouldn't depend on any downloaded files. I reloaded the page, and lo and behold, it was fixed! I thought, "Great, I'll just do the same thing on all of my pages," but as soon as I replaced the downloaded css file with the Bootstrap CDN link, everything else got messed up. So, my first question is "How do I intelligently control the table width?" and my second question is, "Why is the CDN link so drastically different from the one I downloaded with MDB 3.0.1?". Remark: It works fine if I just do "<th width="20%">," but I wanted to take advantage of Bootstrap's functionality and this seems like I'm overriding it. Here are the two versions of the code: 1. (Relies on downloaded stylesheet bootstrap.min.css)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Test</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<table class="table">
		<thead>
			<tr>
			  <th class="col-lg-3">Invoice</th>
			  <th class="col-lg-3">Date</th>
			  <th class="col-lg-3">Amount</th>
			  <th class="col-lg-3">Status</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>12345</td>
				<td>Feb 1, 2014</td>
				<td>$45.00</td>
				<td>Owing</td>
			</tr>
			<tr>
				<td>67890</td>
				<td>Jan 30, 2014</td>
				<td>$19.99</td>
				<td>Overdue</td>
			</tr>
		</tbody>
	</table>
</body>

</html>
2. Uses Bootstrap CDN link obtained here
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Test</title>
	<!-- 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">
</head>

<body>
	<table class="table">
		<thead>
			<tr>
			  <th class="col-lg-3">Invoice</th>
			  <th class="col-lg-3">Date</th>
			  <th class="col-lg-3">Amount</th>
			  <th class="col-lg-3">Status</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>12345</td>
				<td>Feb 1, 2014</td>
				<td>$45.00</td>
				<td>Owing</td>
			</tr>
			<tr>
				<td>67890</td>
				<td>Jan 30, 2014</td>
				<td>$19.99</td>
				<td>Overdue</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Marta Wierzbicka staff answered 5 years ago


Hi, here you have different ways to set up width for columns: https://stackoverflow.com/questions/37924104/bootstrap-4-table-column-sizing or https://stackoverflow.com/questions/15115052/bootstrap-how-to-set-up-fixed-width-for-td . If one way isn't work you can try another one. Best, Marta

This does work if I want the columns to all have equal width, but is there any way to control the width of each individual column without resorting to the normal css of "<td width="x%">? Thank you!

Marta Wierzbicka staff answered 5 years ago


Hi, Copy this table and it should be OK:
<div class="container">
        <div class="row">
            <div class="col-md-6">
                <table class="table">
                    <thead>
                        <tr>
                          <th>Invoice</th>
                          <th>Date</th>
                          <th>Amount</th>
                          <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>12345</td>
                            <td>Feb 1, 2014</td>
                            <td>$45.00</td>
                            <td>Owing</td>
                        </tr>
                        <tr>
                            <td>67890</td>
                            <td>Jan 30, 2014</td>
                            <td>$19.99</td>
                            <td>Overdue</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
Best, Marta

Hi Marta, thanks for responding! Below is how the first table displays for me: Table test It looks like I'm using a different version. The README file says "Material Design for Bootstrap Version: MDB Free 4.3.2"

Marta Wierzbicka staff answered 5 years ago


Hi Anastassia, I copied your table to my MDB Free 3 index file and table display like in the attached picture: table . Does your table display in the same way? If not, please paste here a screen of your table. And write me here what exactly is your version of MDB - you can see this e.g. on the top of mdb.css file, like here: version. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags