Is there a way to remove the border from a bootstrap table?

Utilizing the table feature in Bootstrap 4:

#tablex {
  border-collapse: collapse;
  border-radius: 1em;
  overflow: hidden;
  border: 0px;
}

#tablex tr,
th {
  padding: 1em;
  border-bottom: 2px solid white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffbe1ffe1ff">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-9">
  <h3>last updated</h3>
  <div class="liste">
    <table class="table table-dark table-md table-responsive-md" id="tablex">
      <thead class="thead-inverse">
        <tr>
          <th>#</th>
          <th>Manga Adı</th>
          <th>Bölümler</th>
          <th>Yükleyen</th>
          <th>Linkler</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><i class="fas fa-file-download"></i></td>
          <td>Deneme deneme</td>
          <td>1-56</td>
          <td>libero1i</td>
          <td>yadi.sk/bilmemne</td>
        </tr>

Is there a way to remove the radius when adding border: 0px;?

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

Any suggestions on how to achieve this?

htmlcssbootstrap-4borderbootstrap-table

Answer №1

It appears that your focus may be misplaced - the border you mentioned might belong to a different element, such as a parent of the table or the header above it.

Answer №2

To get rid of the rounded corners at the top of the table, make sure to set the top left and top right radii to zero: 

#tablex {border-radius: 0 0 1em 1em;}

#tablex {
  border-collapse: collapse;
  border-radius: 1em;
  overflow: hidden;
  border: 0px;
}

#tablex tr,
th {
  padding: 1em;
  border-bottom: 2px solid white;
}

#tablex {
  border-radius: 0 0 1em 1em;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258465846">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-9">
  <h3>latest updates</h3>
  <div class="list">
    <table class="table table-dark table-md table-responsive-md" id="tablex">
      <thead class="thead-inverse">
        <tr>
          <th>#</th>
          <th>Manga Name</th>
          <th>Episodes</th>
          <th>Uploader</th>
          <th>Links</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><i class="fas fa-file-download"></i></td>
          <td>Test test</td>
          <td>1-56</td>
          <td>libero1i</td>
          <td>yadi.sk/something</td>
        </tr>

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

Is it possible to center without specifying a fixed width?

Check out this demo link Is there a way to center all the divs and paragraphs under the main div without specifying a fixed width value? I want to remove the 300px width in the .center class and have all the elements align center. Specifically, how can I ...

css

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Resolving jQuery complications in the validation of login forms

I've been attempting to validate a form using jQuery and PHP, but none of the tutorials I've followed have worked for me. I'm feeling lost and confused as I've tried multiple approaches with no success. I'm hoping someone can pinpo ...

phpjqueryhtml

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Find my custom css menu here: Custom CSS Menu On hovering over "about us", the "our clergy" sub-menu appears automatically. I need it to show only when hovering over "our clergy". This screenshot is from Firefox, but webkit browsers like Chrome show a sl ...

wordpressmenucss

Turning off the Bootstrap 4 modal on mobile devices within a Wordpress website

I have a custom method for creating dynamic modals in WordPress: <a href="'. get_the_permalink() .'" data-toggle="modal" data-target="#modal-'. get_the_ID() .'" class="text-center"> <img src="' . get_the_post_thumbnail_ur ...

jquerywordpressbootstrap-4

How can I align navigation items to the right in Bootstrap 4?

Is there a way to align the navigation items to the right in a Bootstrap 4 navbar? I attempted using float-*-right but it didn't produce the desired result. <nav class="navbar navbar-static-top navbar-dark bg-inverse float-*-right"> <a c ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Tips for converting a large number into a string format in JavaScript

I created this easy loan calculator by following online tutorials and using my basic coding skills. It works well, but I would like to add spaces in the output numbers for readability. For example, instead of "400000", I want it to display as "400 000". ...

javascriptjqueryhtml

Customizing Joomla articles for varying heights without needing a scrollbar

I have recently developed a custom jquery plugin that is integrated into a Joomla article using some HTML code. One issue I am encountering is that when the plugin adds additional content at the bottom of the article (shown in red), it causes the article ...

htmlcssjoomla

What is the method for automatically scrolling down while hovering over an image?

How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...

javascripthtmlcsshover

<FormattedMessage /> extract text from within tags

I'm struggling to articulate this issue clearly. Currently, I am utilizing a Bootstrap Table to showcase my data which includes search filters, sorting, and other functionality. As I began working on internationalization, I initially formatted direc ...

javascriptreactjsinternationalizationbootstrap-4react-intl

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

htmlcss

Tips for aligning the button and search bar in the center:In order

Currently still learning HTML, I'm facing an issue with centering a button and a search bar that are positioned beside each other. Despite trying multiple methods, I haven't been successful in achieving the desired centered layout while keeping t ...

htmlcss

Is it possible to divide searches into separate divs?

How can I display the results of my AJAX live search in different result divs for styling purposes? I want to style the results separately and have them appear one at a time. However, the current setup with 'element.style' is causing issues. Is ...

javascriptphpjqueryhtmlcss

Is it a wise choice to implement frames in AngularJS?

I am in the process of developing an AngularJS application with a three-panel main view, resembling a mail system with a navigation bar on the left. The right pane is divided into two sections; selecting an item from the navigation bar populates the top-ri ...

javascripthtmlangularjsiframe

Issue with Google Map Info Windows resizing automatically, no changes have been made to the code

Take a look at my map application. By clicking multiple times on a red marker, you will notice that the info window changes size until it becomes unusually large, affecting all other windows as well. Interestingly, previous versions of my code from 1 month ...

javascriptcssgoogle-maps

jQuery: Retrieve the height of a concealed element using jQuery

Is there a more efficient way to retrieve the height of an element within a hidden div without having to show it first? Currently, I am showing the div, getting the height, and then hiding the parent div, which seems tedious. I'm working with jQuery ...

javascriptjqueryhtmlcss

What is the best way to format page content to fill the entire width of the screen?

I noticed that my content shrinks when the browser width is reduced using dev tools. From the header navigation to the footer, everything is contained within a container element with the following CSS: .container { width: 800px; margin: 0 auto; ...

htmlcssresponsivebreakpoints

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

javascriptjqueryhtmlcssajax

Exporting a web page as a Microsoft Word document is not working properly because

Need assistance with exporting a webpage to Microsoft Word in table format, as the table layout is not displaying correctly and is missing CSS styling. Can someone please help me resolve this issue? ...

htmlcss