I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this customization within Bootstrap tables?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Bootstrap Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Table Example</h2>
<p>Use the .table-striped class to create zebra-stripes in a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th style="width:100px !important;">First Name</th>
<th style="width:400px !important;">Last Name</th>
<th style="width:200px !important;">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274d484c4e6d47514b47674a62495e4256624c41435e5546496e434f4d">[email protected]</a></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8858983809398889281828590949e91c68b8785">[email protected]</a></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f051a03162f0a170e021f030a410c0002">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Another option is to assign an additional class such as
"custom-table custom-width-100 table-striped"Then, define the width for the custom-width-100 class as follows:
.custom-width-100 { width: 100px; !important }
The use of !important in the CSS rule overrides the default bootstrap styling, but it may be worth exploring cleaner alternatives.
If you want to adjust the width of table headers, one way is by using the width attribute like this: <th style="width: 500px">
My strategy for handling this issue would be as follows:
To maintain BootStrap's default styling, add a custom class to the <table>. You can do this by using
<table class="table table-striped custom">Utilize the nth-child selector to automatically target the 1st, 2nd, and 3rd <td>'s in all rows, thus avoiding the need to assign unique styles to each individual <td>:
Check out this JsFiddle link for a demo
Here is the CSS code specifically tailored for this scenario:
.custom td:nth-child(2) {
width: 100px;
}
.custom td:nth-child(3) {
width: 400px;
}
.custom td:nth-child(4) {
width: 200px;
}
I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...
How can I access the elements nested within the 'this' that I am currently operating on? Below is the HTML code that I am currently working with: <div class="expander" id="edu">educational qualifications <ul class="list"&g ...
I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...
I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...
Can you provide guidance on utilizing the image below? Is there an alternative approach to using: <input type="file" /> ...
Update on 2020/02/23: I have made some additions to my project. Apologies for the lack of information provided earlier. The project I am working on is a modified version of the [Gatsby + Netlify CMS Starter][1]. In the process, I swapped out all.sass wit ...
I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...
I have successfully extracted tags from an HTML file using getElementByTagName. However, I am also interested in parsing the IDs and class names within the same HTML file. This is my current approach: $html = new DOMDocument(); $html->loadHTML ...
Is it possible to link an external CSS file stored in Dropbox with HTML? I have followed all the instructions I could find online, including clicking and pressing "Copy Dropbox Link" to generate an href link. However, it doesn't seem to be working. ...
Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...
My goal is to retrieve and display a div tag from another aspx page within my container div. Here is the jQuery code: function GetDocumentInfo(url) { $('MyContainer').load(url + ".otherdiv"); } This operation is triggered by a click event. ...
I recently came across an interesting discussion on the Code Review StackExchange site about best practices for creating forms with multiple rows of identical form inputs. Joseph Silber suggested using bracket notation and avoiding IDs altogether in this s ...
Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...
In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...
Is there a way to specify the location of the 'Request desktop site' option? Here is the code I am currently using: var detector = new MobileDetect(window.navigator.userAgent); if(detector.mobile() != null || detector.phone() != null || det ...
I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...
I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...
I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...
I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...
Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...