How to customize the style of a td element in an HTML table

Attempting to modify the style of a td element:

.valuator .sw-slots table, tr, td { width 100% }

Even after trying to override with this code:

 td.license-name-td{
  width: 100px !important;
}

The global style always takes precedence over my specific style. Chrome does not strike through the link, it simply ignores that section.

  td.license-name-td {
    width: 100px !important
  } 

.valuator .sw-slots table, tr, td {
    width: 100%;
 }

(Output from Chrome computed CSS)

Is there a better method to overwrite the td tag afterwards?

.valuator .sw-slots table, tr, td {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: right;
  color: #3c3c3c;
}

table.license-table td.license-name-td {
  text-align: left !important;
  word-break: break-word;
  overflow: hidden;
  width: 100px !important;
}

table.license-table td.license-td {
  text-align: left !important;
  margin-left: 3px;
  word-break: break-word;
}
<table class="t3lsg license-table" style="font-size: 12px;">
  <tbody><tr>
    <th style="text-align: left;">Software</th>
    <th style="text-align: left;">Version</th>
    <th style="text-align: left;">Source</th>
    <th style="text-align: left;">License</th>
  </tr>
  <tr>
    <td colspan="4">
      <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
      </div>
    </td>
  </tr>
  <tr>
    <td class="license-name-td">Fleck</td>
    <td class="license-td">0.9.6.19</td>
    <td class="license-td">https://github.com/statianzo/Fleck</td>
    <td class="license-td">MIT License</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
      </div>
    </td>
  </tr>
        <tr>
    <td class="license-name-td">HTML Agility Pack</td>
    <td class="license-td">HAP 1.4.6</td>
    <td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td>
    <td class="license-td">Microsoft Public License </td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
      </div>
    </td>
  </tr>
  <tr>
    <td class="license-name-td">jQuery</td>
    <td class="license-td">1.10.2002</td>
    <td class="license-td">http://jquery.com</td>
    <td class="license-td">MIT License</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
      </div>
    </td>
  </tr>
  <tr>
    <td class="license-name-td">jQuery Knob</td>
    <td class="license-td">11.2.8</td>
    <td class="license-td">http://anthonyterrien.com/knob</td>
    <td class="license-td">MIT License</td>
  </tr>
</table>

EDIT: Corrected a mistake by changing an inline style to a class, resulting in the updated outcome.

htmlcss

Answer №1

To address the issue in your example code, I made sure to include the necessary wrapping `div` tags (.valuator, .sw-slots) so that the initial CSS rule can be applied to the table.

Following that, it was essential to ensure that the widths of the table cells were set to a default of auto, except for td.license-name-td which had a predefined width of 100px.

The reset for the `td` pertaining to the separator td[colspan="4"] involved setting its width to auto, followed by doing the same for td.license-td.

This should resolve the issue at hand. Do keep an eye out for any conflicting CSS rules present in your style sheets that could potentially override these adjustments.

.valuator .sw-slots table,
tr, td {
width: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
color: #3c3c3c;
}

td[colspan="4"] {
width: auto;
}

td.license-name-td {
text-align: left;
word-break: break-word;
overflow: hidden;
width: 100px;
background-color: lightblue;
}

td.license-td {
text-align: left;
margin-left: 3px;
word-break: break-word;
width: auto;
}

<div class="valuator">
  <div class="sw-slots">
    <table class="t3lsg" style="font-size: 12px;">
      <tbody>
        <tr>
          ...
        </tr>
    </table>
  </div>
</div>

Answer №2

After making some modifications, I have now assigned a new class name to my table and adjusted the class names as follows:

table.license-table td.license-td{
    text-align: left !important;
    margin-left:3px;
    word-break: break-word;
    width: 100px !important;
}

table.license-table td.license-name-td{
  text-align: left !important;
  word-break: break-word;
  overflow: hidden;
  width: 100px !important;
}

This update successfully resolves the issue I was facing.

Answer №3

The issue arises from the fact that applying width: 100% also impacts the entire table. Since all cells in a row need to sum up to the width of the table, simply limiting the cell's width won't suffice. You must also adjust the table or the other cells in the same row.

I'm not sure what your HTML code looks like, but if the cell is the sole one in the row, you can assign a class to the table instead of the cell and set the table width to 100px just like you did for the cell. In this scenario, there's no need to restrict the cell's width separately as it will adjust automatically.

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

Steps For Adding Margins To A ProgressBar In Bootstrap To Give It A Spaced Look

Currently, I am endeavoring to design a progress bar that includes some spacing from the edges. The desired end result can be seen in the image below: https://i.sstatic.net/IvMFS.png The visual displays a red line within the gray progress bar, which is e ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

javascriptcssreactjsmaterial-ui

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

Hello everyone! I am diving into the world of Gensim Word2Vec and could use some guidance. My current task involves using Word2Vec to create word vectors for raw HTML files. To kick things off, I convert these HTML files into text files. Question Number O ...

pythonhtmlnlpgensimword2vec

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

The behavior of the div element is not as expected when using "<select>", but it functions properly when using "<input>"

I found this code snippet on http://jsfiddle.net/Lijo/PJcZQ/. It features two divs labeled "GROUP1" and "GROUP2" with slightly different content. GROUP 1 <div class="secondTextBox"> <select name="ctl00$detailContentPlaceholder$ddlStatus" id= ...

htmlcss

Troubleshooting issues with the Bootstrap dropdown menu

I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code: <!DOCTYPE html PUBLIC '- ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

javascriptjqueryhtml

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

Selections made from the dropdown menu will automatically generate additional fields in the

The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead: https://jsfiddle.net/c0ffee/pew9f0oc/1/ My specific issue pertains to this screenshot: https://i.sstatic.net/swLqN.png Upon clicking on the dro ...

htmljquerycss

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology: https://i.sstatic.net/4QRcw.png I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .containe ...

css

The browser is only showing particular changes made to the CSS file

I'm currently working on a web project and have the following CSS and HTML code: style.css: body { background-color: red; font-size: 14px; font-family: Roboto,arial,sans-serif color: gray; } img { height: 92px; width: 272px; ...

htmlcsscaching

Is it possible for Javascript to fetch a sound from the server once and then duplicate it across n different objects when loaded multiple times?

Incorporating Javascript into my work is crucial. Here's an example: sound = []; for (var i = 0; i < 20; i ++) sound[i] = new Audio("source.wav"); My concern is whether the sound will be retrieved from the server 20 times, or just once. I a ...

javascripthtmlbrowserloading

Having trouble with element.scrollTo not functioning properly on mobile devices?

I have been working on creating a vertical scrolling carousel, and so far everything seems to be functioning well. I can scroll horizontally using buttons and swipe gestures successfully on the simulator. However, when I view the website on a real mobile d ...

javascripthtmlreactjs

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

javascripthtmlangulartypescript

Error occurs when checkboxes are left unchecked in CherryPy web form

Currently, I am in the process of creating a straightforward web form using CherryPy in Python 3.5 to interact with an sqlite3 database, which requires input of various data types. I encountered an issue where leaving checkboxes unchecked resulted in an er ...

pythonhtmlsqlitenullcherrypy

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

Achieving navigation bar functionality in Bootstrap using jQuery

Is there a way to make the navbar active when it is clicked? Below is the jQuery code I am currently using: $(document).ready(function () { $('.navbar li').click(function(e) { $('.navbar li').removeClass('acti ...

jqueryhtmltwitter-bootstrapnavbar

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

javascriptjqueryhtmljsonstringify

Showing options in a menu to choose from

I'm currently working on implementing a dropdown menu for a news website. When the user selects '1' from the dropdown list, the page should display content corresponding to that selection. If the user selects '2', the page ...

javascripthtml

Tips for aligning words on a single line

Encountering an issue with long words being split up in the middle of a line, as shown in this photo: https://i.stack.imgur.com/IxQi6.png This is the code snippet causing the problem: ineligiblePointsTableRows() { return this.state[PointsTableType. ...

htmlcsssassstyling