Column width in tables is not behaving as expected

Topic: Column width in tables is not behaving as expected

Anastassia Etropolski free asked 6 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>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Anastassia Etropolski free answered 6 years ago

0 0 Best answer

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!

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi,

Copy this table and it should be OK:

<pre><code><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></code></pre>

Best,
Marta

Please insert min. 20 characters.

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

Add comment

Anastassia Etropolski free answered 6 years ago

0 0 Best answer

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"

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

Anastassia Etropolski

10Support score
1Questions 2Answers 0Snippets