Adjust the column font size in the table

I am currently building a table using Bootstrap and I have encountered an issue. I would like to set the font size for column 1 (both header and body) to 12px, and for column 2 (both header and body) to 21px.

In essence, I need to be able to customize the font size for each individual column within the table.

Below is the code snippet:

<table class="table">
  <thead>
     <tr>
        <th style="font-size: 12px;">1</th>
        <th style="font-size: 21px;">2</th>
        <th style="font-size: 12px;">3</th>
        <th style="font-size: 21px;">4</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
  </tbody>
</table>

htmlcssbootstrap-4

Answer №1

To achieve a zebra style (column-based) effect, you can utilize the nth-child/nth-of-type selectors with the odd and even values.

/*one approach */
.table th:first-child,
.table td:first-child {
  font-size: 21px
}

.table th:nth-child(2),
.table td:nth-child(2) {
  font-size: 12px
}

/*second approach */

/* odd */
.table th:nth-child(2n+1),
.table td:nth-child(2n+1) {
  background: red
}

/* even */
.table th:nth-child(2n),
.table td:nth-child(2n) {
  background: lightblue
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515617b607b66">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Answer №2

Using the odd and even keywords in conjunction with nth-child allows for styling every other element:

th:nth-child(odd),
td:nth-child(odd){
  font-size: 12px;
}
th:nth-child(even),
td:nth-child(even){
  font-size: 21px;
}
<table class="table">
  <thead>
     <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
  </tbody>
</table>

Answer №3

Utilizing CSS nth-child makes it simple to target specific child elements, as shown below:

td:nth-child(1),
td:nth-child(3),
th:nth-child(1),
th:nth-child(3){
  font-size: 12px
}

td:nth-child(2),
td:nth-child(4),
th:nth-child(2),
th:nth-child(4){
  font-size: 21px
}
<table class="table">
  <thead>
     <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
     </tr>
  </tbody>
</table>

Visit MDN Web Docs for more information on nth-child

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulties arise when HTML divs do not properly encapsulate their intended content

https://i.sstatic.net/zg35O.png Having trouble with my div id "topcol" - it's not displaying the full area as intended. Supposed to contain 4 "options". Options have relative positioning to allow option titles to overlay images. Struggling with what ...

htmlcsspositioncss-position

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Looking at this Bootstrap example page, I noticed a small issue with the nav-justified navigation. When the window is minimized, it transitions correctly to a mobile version. However, when the window is maximized again, the buttons remain in the mobile for ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS for when there are two elements

When there are two of the same elements present in the following HTML markup, I want to style them using (S)CSS without relying on JavaScript for counting and applying additional classes. I am looking for a solution within CSS/Sass that allows me to targe ...

htmlcsscss-selectors

Positioning images to the right without using the float property

In my WordPress website, I am using the NextGEN Gallery plugin to display fixed-width images within a fluid-width <aside>. My goal is to align these images to the right of the <aside> container without using the float property because it revers ...

phphtmlcsswordpressnextgen-gallery

Tips for adding a solid background color to a div element

I am struggling with trying to make a full width background-color for a div in my ruby on rails app. Despite setting the background color and margin to 0, I still end up with unwanted margins on the left, right, and top. Below is the code snippet: <!D ...

ruby-on-railsrubyhtmlcolorsbackground

Targeting a particular user category using MySQL and PHP

Currently, I am working with 3 files for connection.php which include work.php and login.php. These filesare vital in helping me identify the type of users or administrators in the database. My coding/dev process requires the use of MySQL, hence why I uti ...

phpmysqlhtml

Interrupting an SVG animation

Is there a way to stop an SVG animation using jQuery? The SVG image is dynamically inserted in the DOM using viewHelper (like Typo3Fluid). I tried adding a class .stop with animation-play-state: paused; but it didn't work. Here's the JavaScript ...

jquerycsssvg

Align an image to the right with specified maximum width and height restrictions

I need help with aligning an image to the right while maintaining its max-width and max-height. The issue is that when the width is adjusted, the image moves to the left side instead of staying on the right edge. How can I prevent this and keep the image ...

jqueryhtmlcssright-align

confirmation message upon completing a form submission

<script> var remainingCredit = document.getElementById("cor_credit"); var remaining = document.getElementById("remain_credit"); function validateForm() { if (remaining.value < remainingCredit.value) { return conf ...

javascripthtml

Angular: Discovering and retrieving all images within a div container

I am on a quest to locate all image tags within a specific div. These image tags are nested within paragraph tags inside the div. I attempted to create a plunkr to accomplish this task, but unfortunately, I haven't had any success yet. If anyone is ab ...

javascriptjqueryhtmlangularjs

Elements missing from the Bootstrap 5 framework

I've been attempting to link my bootstrap card deck to a mongo database with ejs. The website renders without any errors, but for some reason, the cards are not displaying. Does anyone have any insight into what could be causing this issue? Below is ...

htmlejsbootstrap-5bootstrap-cards

Switching Image Values in JavaScript: A Quick Guide

After successfully using a JavaScript function to swap the src of two images, I encountered an issue. I also needed to switch two values associated with the images so that I could calculate them later. For example: img src="ble.jpg" id="F" value="" onclic ...

javascripthtmlimage

Using JQuery to display and conceal div elements with a mouse click

My script is working perfectly for showing and hiding a specific div (#id) on click. The only thing I need to figure out is how to change the font color of the text "Click Here" based on whether the div with class "menu" is hidden or shown. When the "menu" ...

jqueryhtml

Validation for one or multiple entities did not pass successfully. Please refer to the 'EntityValidationErrors' property for further information on the errors. This issue is originating from the

Currently, I am working with Entity Framework Code First From Database in MVC5 using C#. My goal is to add a new user, but I encountered an error when attempting to add an email address. Below is my controller method: [HttpPost] public Action ...

c#sql-serverhtmlef-code-firstasp.net-mvc-5

Using const enums in Angular HTML templates

If I have a constant enum called MyConstEnum: export const enum MyConstEnum{ Value1 = 'Value1', Value2 = 'Value2', Value3 = 'Value3' } How can I use it in an Angular template? <span *ngIf="name === MyConst ...

htmlangulartypescripttemplatesenums

jQuery: Maintain hover state regardless of browser's suggestions for input elements

I have a navigation with a nested ul list structure like this <ul id='mainNav'> <li> Some Stuff! <ul> <li>Page 1</li> <li>Page 2</li> </ul> </li> <li> Hover here t ...

javascriptjqueryhtmlcsshover

Responsive Navigation Bar with Bootstrap

Struggling with the Bootstrap 4 navbar issue, specifically trying to close it when the <a> within the <li> tag is clicked. Experimented with data-toggle="collapse" data-target=".navbar-collapse.show" inside the <a> tag and it worked, but ...

jquerybootstrap-4

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

javascripthtmlangularjsmodel-view-controller

Display a circular div containing information; upon hovering over it, reveal all details

Looking to create a layout with three circular divs side by side where the bottom of each circle displays the beginning of an information text. Upon hovering, the full text should be revealed: My initial approach involved setting the CSS properties for a ...

csshtmlhovergeometry

Unlimited rotation feature using Twitter Bootstrap

I am currently working with a carousel using Twitter Bootstrap to display 5 items. Here is an example of what I have set up: <div id="carolsel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

jquerycsstwitter-bootstrap