Show the separation between columns in a bootstrap table

Can someone help me with setting up a cryptocurrency ticker display using Bootstrap? I want to add vertical lines between columns using border properties, but I'm not sure how to make the right side borders of the cells visible along rows.

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca9b2acb2ad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- HTML -->

<div className="table-responsive-l">
  <table className="table table-borderless fw-lighter table-xxl">
    <tbody>
      <tr className="fs-5 row-bottom-margin" id="currency_labels">
        <th>BTC</th>
        <th>ETH</th>
        <th>XRP</th>
        <th>BCH</th>
        <th>EOS</th>
        <th>DOGE</th>
      </tr>
    </tbody>

    <tbody>
      <tr className="fs-5">
        <th>$1.00</th>
        <th>$2.00</th>
        <th>$3.00</th>
        <th>$4.00</th>
        <th>$5.00</th>
        <th>$6.00</th>
      </tr>
    </tbody>

    <tbody>
      <tr className="fs-6">
        <th>+0.1%</th>
        <th>-0.2%</th>
        <th>+0.3%</th>
        <th>-0.4%</th>
        <th>+0.5%</th>
        <th>-0.6%</th>
      </tr>
    </tbody>
  </table>
</div>

htmlcssbootstrap-5

Answer №1

Could you please review the code snippet below and confirm if it meets your expectations?

th:not(:last-child) {
  border-right: 1px solid #444;
}

table {
  border-spacing: unset;
}
<div class="table-responsive-l">
            <table className="table table-borderless fw-lighter table-xxl">
                <tbody>
                    <tr className="fs-5 row-bottom-margin" id="currency_labels">
                        <th>BTC</th>
                        <th>ETH</th>
                        <th>XRP</th>
                        <th>BCH</th>
                        <th>EOS</th>
                        <th>DOGE</th>
                    </tr>
                </tbody>

                <tbody>
                    <tr className="fs-5">
                        <th>$1.00</th>
                        <th>$2.00</th>
                        <th>$3.00</th>
                        <th>$4.00</th>
                        <th>$5.00</th>
                        <th>$6.00</th>
                    </tr>
                </tbody>

                <tbody>
                    <tr className="fs-6">
                        <th>+0.1%</th>
                        <th>-0.2%</th>
                        <th>+0.3%</th>
                        <th>-0.4%</th>
                        <th>+0.5%</th>
                        <th>-0.6%</th>
                    </tr>
                </tbody>
            </table>
        </div>

Implemented the border-spacing: unset; property on the table to eliminate space between rows.

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

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

htmlcss

Tips for locating and clicking the 'Start' button in HTML using either find_element_by_xpath or the Selenium-Python API

Need help selecting the 'Start' button and clicking it in the HTML code below. I want to do this using the python-selenium library like so: driver.find_element_by_xpath('//div[contains(@class,"box enter")' ...

pythonhtmlselenium

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

Invoking a function within an HTML file does not result in triggering an alert message

Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...

javascripthtml

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

Employing a selection menu within a form to execute a SQL SELECT query

Thank you for taking the time to read my question. I am currently in the process of developing a form that will allow users to search a database for cards used in a collectible card game. One important feature I want to include is a dropdown menu that ena ...

phpsqlhtml

Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message. Is ...

javascriptjqueryhtmlcsstwitter-bootstrap

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

jqueryhtmlcsssearch

How to extract information for divs with specific attribute values using Jquery

I have multiple divs with IDs like #result-1, #result-2, each followed by a prefix number. To count the number of list items within these divs, I use the following code: $(document).ready(function () { var colorCount = $('#result-1 .item-result ...

javascriptjqueryhtml

Is there a way to restrict the number of checkboxes selected based on the values of radio buttons?

I am currently working with a group of radio buttons: <input type="radio" name="attending_days" value="06-18-13"/>Tuesday June 18, 2013 <input type="radio" name="attending_days" value="06-18-13"/>Wednesday June 19, 2013 <input type="radio" ...

javascriptjqueryhtml

Is there a way to implement the adjacent selector in combination with the :before selector?

Hello there, I am working on a timeline area with a slick effect and have implemented slick.js for that purpose. I am trying to change the color of my spans within the elements. Specifically, I changed the first span in the slick-active class element succe ...

htmlcsscss-selectorspseudo-elementslick.js

Struggling to locate element using Selenium in Python 3?

While using Selenium for WebScraping, I've encountered difficulty detecting an element using xpath, full xpath, id or text. <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> <div class=cbp-vm-options">...& ...

pythonhtmlselenium

Presentation Slider (HTML, CSS, JavaScript)

Embarking on my journey of creating webpages, I am eager to replicate the Windows 10 start UI and its browser animations. However, my lack of JavaScript knowledge presents a challenge. Any help in reviewing my code for potential issues would be greatly app ...

javascripthtmlcss

CSS - When using both display: flex and position: absolute, the anchor point is shifted

I have a flexbox element with three children. I want the second child to overlap the first child using absolute positioning, like this: Desired Outcome: https://i.stack.imgur.com/i479w.png It's important that the second child appears on top of the ...

htmlcssflexbox

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...

javascriptjqueryhtmlcssdom

A web page with a full-width header, content constrained to a set width, logo elements displayed with flexbox, and a footer that

I've been facing challenges in making this website responsive on both desktop and mobile devices. Initially, the header background image wasn't displaying as intended, followed by issues with the flexbox logo elements in the header and the sticky ...

htmlcssresponsive-designsticky-footer

What happens when a CSS module is exported as an empty object?

My go-to for creating projects is using TypeScript and create-react-app. I recently incorporated the typings-for-css-modules-loader and dabbled in css-modules as well. { test: /\.css$/, use: [ require.resolve('style-loader'), { ...

javascriptcssreactjstypescript

Using CSS to duplicate images in multiple repetitions horizontally

In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, w ...

jqueryioscss