Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height.

https://i.sstatic.net/GwFaD.png

Table CSS

.table tbody tr:hover td, .table tbody tr:hover th {
    background: rgba(36, 198, 213, 0.3);
    opacity: 0.5;
    color: #000;
}

.table tbody {
    font-size: 15px;
}

.dataTable tbody tr {
    line-height: 20px !important;
    height: 40px;
}

.dataTables_paginate a {
    background: #ff0000;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
    /* Feeling sorry for IE */
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white;
}

.dataTables_length {
    width: 40%;
    float: left;
}

.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;
}

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    float: right;
    text-align: right;
}

$(document).ready(function(){
  $("#ignored_device_table").DataTable( {
    order: [[ 0, "asc"]],
    dom: 'Bfrtip',
    buttons: ['copy','excel', 'pdf','csv','print']
  });
});
<!-- page content -->
<div class="right_col" role="main">
  <div class="">
    <!-- host data table -->
    <div class="row">

      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Ignored Devices
              <small>By Date</small>
            </h2>
            <ul class="nav navbar-right panel_toolbox">
              <li>
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                  <i class="fa fa-wrench" role="menu"></i>
                </a>
              </li>
              <li>
                <a class="close-link">
                  <i class="fa fa-close"></i>
                </a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>

          <div class="x_content">
            <div class="table-responsive">
              <table id="ignored_device_table" class="table table-striped">
                <thead>
                  <tr>
                    <th>Date </th>
                    <th>Hostname </th>
                    <th>IP Address </th>
                    <th>Name </th>
                    <th>Reason </th>
                    <th>Expiration </th>
                    <th><span class="nobr">Action</span></th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>05/06/16</td>
                    <td>DB-01</td>
                    <td>192.168.1.100</td>
                    <td>Jimmy Smith</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id iaculis massa. Mauris libero augue, bibendum ut efficitur a, imperdiet vel nisl. Curabitur ut blandit velit. Nulla tincidunt leo convallis risus bibendum, pulvinar bibendum lectus maximus. Vivamus convallis mi vel mollis sollicitudin. </td>
                    <td>06/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>05/02/16</td>
                    <td>DB-02</td>
                    <td>192.168.1.101</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>06/02/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>04/06/16</td>
                    <td>WEB-01</td>
                    <td>192.168.1.102</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>05/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>03/06/16</td>
                    <td>WEB-02</td>
                    <td>192.168.1.103</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>04/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>02/22/16</td>
                    <td>Firewall</td>
                    <td>192.168.1.104</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>03/22/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

Answer №1

Upon further experimentation, I found it necessary to modify the bootstrap styling:

.table.dataTable > tbody > tr > td {
  line-height: 2rem !important;
}

Answer №2

REVISED
-------

Inspect the console for the id assigned to the table.
Within its descendants, you will locate the tr elements.

The script should resemble this:

$("#ignored_device_table").find("tr").css({"height":"20px"});

In your stylesheet, you might experiment with (although I cannot guarantee):

#ignored_device_table tbody tr{
    height:20px !important;
}

To manipulate the overall dimensions of the table, consider dealing with the wrapper. This aspect initially confused me in my initial response.

---------------
Prior solution Look for the id created by DataTable to enclose the table.

This id is derived from the one you specified as the table id in your HTML.
For instance, if your table was identified using the id cert:

The resultant wrapper would be: cert_wrapper. You can identify this through inspection within the console.

Subsequently, you can code accordingly... Such as:

$("#cert_wrapper tr").css({"height":"20px"});

You can target generic tr, td, etc. but not a specific element since DataTable does not generate unique row or cell identifiers.

Ensure these forthcoming scripts are enclosed within an $(document).ready(function(){}); as the table is dynamically generated on the client-side.

;)

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

Arrange divs on the screen in a specific formation

I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows: 0 0 0 0 0 0 0 0 0 0 My aim is to achieve this using jQuery on a mobile ...

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

Executing a Python script within an HTML page using Django and extracting a variable from an input form

I have created a sentiment analysis Python script, but now I want to integrate it with an HTML page. The goal is to take input from the HTML form, process it using the Python script, and then display the results back on the HTML page. Currently, I am usin ...

jQuery load() function triggers unexpected error in jQuery plugin

Here is the current structure of my page: <body> <div id="menuBar"> </div> <canvas id="myCanvas" width="700" height="700" style="border:1px solid #000000;"></canvas> </body> <script src="../Scripts/jQuery.mazeBo ...

Steps for integrating a video into the Bootstrap navigation bar

I've been working on a Bootstrap menu design that features text on the left side and a video on the right. My goal is to make the video extend to the top of the page with a button overlaid, similar to the image I have in mind. However, I've encou ...

Using jQuery AJAX to send data containing symbols

When making an AJAX call, I am including multiple values in the data like this: var postData = "aid="+aid+"&lid="+lid+"&token="+token+"&count="+count+"&license="+license; postData = postData + "&category="+category+"&event_name="+e ...

Leveraging Generic Types in React with TypeScript for Dynamically Assigning HTML Props based on Element Tags

I am frequently in need of a component that is essentially just a styled HTML tag. A good example is when I want to create beautifully styled div elements: // Definitions const styledDiv = (className: string) => { const StyledDiv = React.FC<HTMLA ...

Developing a search feature using Ajax in the MVC 6 framework

Embarking on a new project, I have chosen c# .net 6 MVC in VS2022... In my previous projects, this code has run flawlessly. @section Scripts { <script type="text/javascript"> $("#Klijent_Name").autocomplete({ ...

Sending an object as a prop in React component

I have a function class: function TopicBox({topicName, article1}) { return ( <div className="TopicBox"> <h1>{topicName}</h1> <div className="topicDivider" /> <Ar ...

What is the best way to include a div element with a dynamic animation on a webpage?

I'm attempting to create a laser beam that can shoot enemies on the screen, much like in classic games such as Space Invaders or Galaga. However, I am encountering difficulties getting the laser to move when I click the button. Below is the code I hav ...

Tips for personalizing the error message displayed on Webpack's overlay

Is there a way to personalize the error overlay output message in order to hide any references to loaders, as shown in this image: https://i.sstatic.net/ESFVc.png Any suggestions on how to remove the line similar to the one above from the overlay output? ...

Identifying Angular 2 templates post-file separation: a step-by-step guide

I am currently trying to figure out how to initiate a project in Angular 2 and have encountered an issue. Following the steps outlined in this Angular 2 guide, I was able to separate my .ts files from .js files by configuring my 'temp' directory ...

Trouble with Bootstrap 5 Dropdown Functionality

Currently, I am using Bootstrap 5 in conjunction with Django to create a website and I'm encountering difficulties with getting a dropdown feature to work properly. Despite copying the code directly from w3schools, it fails to function when I load the ...

Automatically populate a div with content from a file

As I am completely new to the world of HTML, I find myself in need of quickly putting together something for work just as a proof of concept. I apologize if this question has been answered previously, but honestly, I wouldn't even know how to start se ...

Is the input field not properly centered on the page?

Can someone explain why the input field is not aligning in the center? I am new to web development and need some assistance. <input type="text" id="search_bar" class="form-control" placeholder="Search" align="center"> In my CSS, I've ...

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

My current setup involves using Framework7 (framework7.io). The code below functions correctly on the main view page, utilizing a looping settimeout to refresh signups.html every second: <script type=“text/javascript” src=“code.jquery.com/jquery- ...

When the object contains multiple arrays, filter out the id and remove it when clicked

I am working with an object that contains multiple arrays and aiming to filter out the id of the item to be removed onClick. However, I have encountered an error while trying to implement this logic. The error message I received is filter is not a functio ...

Struggling to insert a high-quality image into inline divs of exactly 33.3333% width

After creating 3 inline divs, each taking up 33.333% of their parent width, I encountered an issue while trying to insert images into them. Whenever the image exceeds the 33.333% width of the div, it overflows outside the container. My goal is to make the ...

Why does my ball defy the laws of geometry and refuse to be perfectly round with

I'm attempting to create a simple game in javascript, but I've run into an issue where my circle isn't perfectly round. Despite searching for solutions online for 20 minutes, I haven't been able to resolve the problem. I'm hoping s ...

Angular.js loads, processes, and presents a dynamic template that is fetched through an $resource from a REST

My Angular application requires customizable reporting functionality. The goal is to permit users to select from a variety of available reports, with a backend REST API providing both the template and data in JSON format for user customization. The app wi ...