Attempt to apply border-bottom style results in negligible changes

I have a snippet of HTML that showcases a grid-like structure. It's mostly how I want it to be, but I would like the last three rows to have a dotted underline. I attempted to achieve this using the following styling:

style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px"

However, it doesn't seem to have any effect at all, even when adjusting the width. What am I overlooking?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title></title>
</head>
<body>
  <div id="AnimalGrid" style="border:solid; border-width:2px; border-color:lightgray; padding-left:12px;padding-top:8px;margin:10px">
    <table style="width:100%">
      <tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td>
      </tr>
      <tr>
         <td style="width:25%; font-size:large; padding-left: 2px"><i>Animal<sup>1</sup></i></td>
         <td style="width:25%; font-size:large; padding-left: 6px"><i>Animal</i></td>
         <td style="width:25%; font-size:large; padding-left: 6px"><i>Speed<sup>2</sup></i></td>
         <td style="width:25%; font-size:large; padding-left: 6px"><i>Type<sup>3</sup></i></td>
      </tr>
      <tr style="border-bottom-style:dotted; border-bottom-color: black; border-bottom-width:2px">
        <td style="width:25%; font-size:large; padding-left: 6px">Cheetah</td>
        <td style="width:25%; font-size:large; padding-left: 6px">Tiger</td>
        <td style="width:25%; font-size:large; padding-left: 6px">60mph</td>
        <td style="width:25%; font-size:large; padding-left: 6px">Carnivore</td>
      </tr>

      <tr style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">
        <td style="width:25%; font-size:large; padding-left: 6px">Lion</td>
        <td style="width:25%; font-size:large; padding-left: 6px">Zebra</td>
        <td style="width:25%; font-size:large; padding-left: 6px">40mph</td>
        <td style="width:25%; font-size:large; padding-left: 6px">Mixed</td>
      </tr>

      <tr style="border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">
        <td style="width:25%; font-size:large; padding-left: 6px">Horse</td>
        <td style="width:25%; font-size:large; padding-left: 6px">Cow</td>
        <td style="width:25%; font-size:large; padding-left: 6px">10mph</td>
          <td style="width:25%; font-size:large; padding-left: 6px">Herbivore</td>
       </tr>
     </table>
   </div>
 </body>
 </html>
htmlcssborder

Answer №1

Is this what you're looking for?

<!DOCTYPE html>
<html lang="en>
<head>
  <meta charset="UTF-8>
  <title></title>
</head>
<body>
  <div id="AnimalGrid" style="border:solid; border-width:2px; border-color:lightgray; padding-left:12px;padding-top:8px;margin:10px">
    <table style="width:100%">
      <tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>REPORT DETAILS</b></td>
      </tr>
      <thead>
         <th style="width:25%; font-size:large; padding-left: 2px"><i>Animal<sup>1</sup></i></th>
         <th style="width:25%; font-size:large; padding-left: 6px"><i>Animal</i></th>
         <th style="width:25%; font-size:large; padding-left: 6px"><i>Speed<sup>2</sup></i></th>
         <th style="width:25%; font-size:large; padding-left: 6px"><i>Type<sup>3</sup></i></th>
      </thead>
      <tr>
         <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Cheetah</td>
         <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Tiger</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">60mph</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Carnivore</td>
    </tr>

    <tr>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Lion</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Zebra</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">40mph</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Mixed</td>
    </tr>

    <tr>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Horse</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Cow</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">10mph</td>
        <td style="width:25%; font-size:large; padding-left: 6px; border-bottom:dotted; border-bottom-color: black; border-bottom-width:2px">Herbivore</td>
    </tr>
    </table>
    </div>
  </body>
</html>

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

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

javascriptjqueryhtmlredirect

What is the best way to access CSS variables declared in the root element?

For my React project, I have defined color variables. I want to create my own color palette for the DevExtreme pie chart UI component. :root { --my-pastel: var(--rose) var(--beige) var(--bright-orange) var(--brighter-orange) var(--bright-rose) var(--bright ...

javascriptcssreactjsdevexpress

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

Select two images and simultaneously move them around on a webpage

Looking for a way to replicate the functionality shown in this image - when I drag one map, another one should automatically move as well. Additionally, the downtown map needs to be contained within the mobile frame. The two map images are located in sep ...

javascriptjqueryhtmlcss

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

Issue with image preview functionality in dialog modal when loading content via ajax request

<table id="result"> <a href='#' class='pop'><span class='fa fa-eye'><img src='image link here' style='display:none'></a> </table> The hyperlink above is designed to open ...

phphtmlajax

Tips on efficiently inserting numbers into the names of copied input elements

I've been struggling with a problem for hours now and I need help... I'm trying to change the names of my automatically cloned inputs. Here is the snippet of my HTML code: <form id="dodawanie" action="" method="post"> <div class= ...

jqueryhtml

Retrieve data from multiple inputs with the same name in a Spring MVC form

I have a JSP page with input fields that can be dynamically added or removed. I need to map these input fields to the @ModelAttributes in Spring MVC, but I'm unsure of how to do this. I want to submit a form that includes: <form enctype="multipar ...

javahtmlspringformsjsp

Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just befor ...

htmlcssangularag-gridtablecelleditor

When a user clicks on a list item, a class is added to change the background color of that particular item while simultaneously removing the class from other list items

add image description hereI'm attempting to apply a class to the list item in an unordered list when clicked, while simultaneously removing the same class from the other list items. I've tried using the JavaScript logic below, but I'm not a ...

javascripthtmljquerycssdom

Troubleshooting my Xpath query for HTML - where did I make a mistake?

Within the <BODY> tags, there is a piece of HTML that I'm attempting to target using scrapy: <section class="content"> <div class="social clearfix"> <div class="profile profile-nano pull-left"> <a hr ...

htmlxpathweb-scrapingscrapy

My custom CSS being overridden by Bootstrap styles

I'm currently working with Twitter Bootstrap's CSS, but it seems to be overriding some of my custom classes. Initially, I placed it before my own CSS in the HTML header (I am using jade and stylus template engines): doctype html html head ...

htmlcsstwitter-bootstrappugstylus

Utilize a dual-color gradient effect on separate words within the <li> element

I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here: https://i.sstatic.net/Yvdal.jpg I have successfully displayed "fizz" and "buz ...

javascripthtmlcss

Creating a pie chart using Highcharts in a Django framework

Trying to create a pie chart in Django with data from my "Results" model. The model has two fields: +--------+------------+ | result | date | +--------+------------+ | passed | 2017-03-30 | | passed | 2017-02-30 | | passed | 2017-03-30 | | faile ...

javascriptcssdjangotwitter-bootstraphighcharts

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

Identify instances of repeated values in input fields

I'm working on a complex html form that includes multiple email fields. To ensure data integrity, I want to prevent users from entering the same email in more than one field. After some trial and error, I successfully identified duplicate emails by s ...

javascripthtmljqueryarraysforms

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such th ...

javascriptjqueryhtmlcssajax

Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...

htmlcss

Experience the magic of playing HTML5 video within the sleek confines of an iPhone image

After coming across a similar inquiry on Stack Overflow (), I decided to create my own solution since the original answer lacked code details. The task at hand is to embed an HTML5 video within an iPhone image frame, like so: The image dimensions are 300 ...

htmlcsshtml5-video

Why is React App showing up twice on the webpage?

After successfully creating a React app based on Free Code Camp's Drum Machine project that passed all tests on Code Pen, I encountered an issue when transferring the code to Visual Studio. Surprisingly, the app now fails one test (#6) even though it ...

javascripthtmlreactjs