remove 12px padding on all table elements

All the header and row cells of my table have 12px of padding. I have set padding to 0px in every possible place but it still exists . Where is it comming from and how do i remove it. Thanks

Have you posted the page to the web yet? Can we have a look at it?

Yes, the link is:

webaprs.bss.design

Alan

The Bootstrap.css file sets the default padding for Table Header (th) tag and Table Data (td) tag to 0.75rem which is 12px

@AlanTJohnstone

The link you provided goes nowhere.

Simply add this to your styles.css file and you will have no padding on your tables.

.table td, .table th { padding: 0; }

Thanks for everybody replying so quickly. The

.table td, .table th {padding: 0;}

worked perfectly. I wonder if you could tell me why this works but putting

td,tr,th{padding:0;}

does not?

Alan

@AlanTJohnstone

Because

td, tr, th { padding: 0; }

Is not targeting the proper classes. You need to brush up on your CSS syntax skills.

You are quite right there. I am only starting out in this area and know very little. I believe that you are saying that I have not been specific enough and that the .table td etc is more specific and overrides the Bootstrap CSS. However I am unclear where the class table came from. I have not created it and it does not seem to appear in any of the html that I can see. Incidentally I do not know why the link I gave does not work as it works for me. The current version of the page includes the removal of the 12px padding and needs some tarting up - including reemoving the second scroll bar from the table that somehow got there!

Thanks again.

Like I said, if you look in the default Bootstrap.css file, there is the CSS classes that changes the padding to 12px (0.75rem)

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

@ Printninja uses these classes to overwrite the code in his example

@AlanTJohnstone

Create a blank Bootstrap Studio project. Drag in a Table component and click on any cell. Look at the Styles panel at the bottom of the program workspace. That shows which classes are actively affecting the selected component. The very first entry is

.table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; }

Experience building websites, and studying/writing CSS is how you know what to look for. You can also find this information in a published website by using the browser inspection tools built into Chrome, Firefox, etc...

In CSS, classes have a . before them. None of what you had in your example was targeting the parent class .table That's why your changes had no effect.

You should brush up on the basics of how Cascading Style Sheets work.

Printninja I think you misunderstood at least part of my problem - I fully accept that the amount of CSS I know is dangerous. In my table there is no class "table" so I do not see how ".table" is working. Here is the part of the code that applies:

<div id="flarmTable">
    <div>
        <table class="table sortable" id="myTable">
            <thead>
                <tr>
                    <th id="h1" class="sorttable_alpha">Reg</th>
                    <th id="h2" class="sorttable_alpha">CN</th>
                    <th id="h3" class="sorttable_numeric">Alt</th>
                    <th id="h4" class="sorttable_numeric">Lat</th>
                    <th id="h5" class="sorttable_numeric">Lon</th>
                </tr>
            </thead>
            <tbody onkeydown="isShiftKeyPressed(event)" onkeyup="keyUp()" onmousedown="mouseDown(event)">
                <tr onclick="divClick(this)">
                    <td colspan="5">Loading</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

You seriously need to go get some knowledge on both HTML and CSS. It's staring you right in the face and you don't even realize it because you don't know what you're looking for. This app can only do as much as your knowledge will allow. Please go learn how to do CSS and HTML so you have a better understanding of what to do with this app. It's not a fully drag and drop with no knowledge app, you do need to have at least a functional set of skills to use it properly and the forums here aren't for teaching people how to do code, they are for help with the app itself and this issue is definitely not that.

<table class="table sortable" id="myTable">

Jo

This has probably gone on long enough. Although I am new to web programming I am not a complete beginner either. Could you please tell me where in the line of code you have highlighted is there any mention of a class called "table". As other people have pointed out that is the default class used by Bootstrap. It is also the class that was used in the very first answer that Printninja gave:

.table td, .table th { padding: 0; }

As far as I can see there is no mention of a "table" class in any of the html I provided above and I find it hard to understand how the CSS that Printninja gave me works which it does.

lol I gave you the exact line it is in, you'll need to take it from there and work it out. That's why I say you need to learn the structure of how this all works.

@AlanTJohnstone

As @Jo said, it's staring you in the face...

enter image description here

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

I was reading the class as one called "tablesortable" not two called "table" and "sortable". thanks for your patience. The site is now at:

https://www.glidertracking.co.uk/

@AlanTJohnstone You read it wrong because you do not understand the basic syntax of CSS. Something as innocuous as a blank space can mean the difference between a page rendering correctly, or not rendering atll. Or a software application running or not running. This stuff is basic "computers 101."

If you plan to build websites for a living, and don't want to waste hours trying to track down problems like this, I would recommend you invest doing in a basic CSS coding course, or at least study the link i posted above. There are hundreds of free resources online from which you can learn CSS, HTML, and pretty much any other aspect of coding websites.