Initiate a border around the content within an HTML table

Here is the html code that I am working with:

<table border="1" style="width:100%;padding-left:12.4em;" bordercolor="F0C347">                                 
 <tbody>
    <tr>                      
        <td><b>Assert Name </b></td>             
        <td><b>Expected</b></td>    
        <td><b>Actual</b></td>           
         <td><b>Assert Expression</b></td>  
    </tr>       
    <tr>            
         <td>Name</td>            
          <td> true</td>    
           <td> true</td> 
           <td>assert.equal(true,spy.calledOnce);</td>
 </tr>
</tbody></table>

You can view the sample output here.

I noticed that the border in the table is creating extra white space on the left side. I would like the border to start directly from the 'Assert Name' column. How can I achieve this while keeping the padding as it is?

Note: The padding must remain unchanged.
htmlcss

Answer №1

Your table appears to have excessive padding. Removing it should resolve the issue.

EDIT: It seems like you may be referring to margins instead of padding. Please ensure you are using the correct terminology.

<table border="1" style="width:100%;margin-left:12.4em;" bordercolor="F0C347" >
    <tbody>
        <tr>
            <td><b>Assert Name </b></td>
            <td><b>Expected</b></td>
            <td><b>Actual</b></td>
            <td><b>Assert Expression</b></td>
        </tr>
        <tr>
            <td>Name</td>
            <td> true</td>
            <td> true</td>
            <td>assert.equal(true,spy.calledOnce);</td>
        </tr>
    </tbody></table>

Updated Fiddle:http://jsfiddle.net/babtb2uy/6/

Answer №2

Could you kindly eliminate the padding-left:12.4em; from the inline style : Click here for the JsFiddle link

<table border="1" style="width:100%;" bordercolor="F0C347">

Answer №3

define

margin-right:0em

That's all there is to it

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

Dynamic Loading of CSS Styles

My style-sheet is saved in this unique location: /opt/lampp/htdocs/project/core/styles/Style.css To load the CSS file using the full directory, considering that the files utilizing it are situated here: /opt/lampp/htdocs/project/client/ The ultimate ob ...

javascriptphpjqueryhtmlcss

Display the list items within a div container without the need for negative margins

I'm in the process of learning CSS. Here's some HTML code I've been working on: <body> <div id="header"> <span id="websiteName"> VISHAL </span> <div id="languageBar"> ...

htmlcss

Photo Collection: Incorporating Images

I am currently working on a project to create a photo gallery and I am facing an issue with adding photos. The user should be able to browse for a picture and enter a title for it on a page. Both the image path and title need to be saved in an XML file fro ...

phphtmljsonajaxxml

Navigating within an ionic framework

I am facing an issue with a simple form in my application. When I try to enter user details, the Android keyboard hides the email field and mobile number field, making it impossible for me to scroll the page upwards. Can anyone suggest a solution? <i ...

htmlangularjscordovaionic-framework

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

htmlcss

Rows intersecting and stacking above one another

I designed a layout with some text and icons displayed in rows. While it appears properly on iOS, the rows overlap on Android. const criteriaList = [ { id: 0, title: 'Noor', checked: false }, { id: 1, title: 'Friends & Grades', ...

javascripthtmlcssreactjsreact-native

Having trouble getting your AngularJS code to work?

Recently, I decided to experiment with AngularJS and started working on a new project. Below is the HTML code I wrote: <div ng-app ng-controller="nameController"> <input type="text" value="Jack" ng-model="fname" /> <input type="tex ...

javascripthtmlangularjs

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

javascriptjquerycsstwitter-bootstrap

Error: The function $.simpleTicker is not defined

Every time I try to call a jQuery function, an error shows up: Uncaught TypeError: $.simpleTicker is not a function I attempted changing $ to jQuery but it didn't resolve the issue. This represents my jQuery code: (function ($) { 'use ...

javascriptjqueryhtml

How to prevent Bootstrap Carousel from automatically sliding on mobile devices without using JavaScript

Is it feasible to halt the autoslide feature on mobile view through CSS? Perhaps using a media query for extra small (xs) screens and then adjusting a carousel element...? <div id="carousel" class="carousel slide" data-ride="carousel"> <!- ...

csstwitter-bootstrapmobilecarouselslide

Guide on aligning a non-fixed child within a fixed parent container

I am working on a project with a fixed container (div#popup) that has some CSS styling. The container is set to position:fixed, with specific dimensions, border radius, and background color. Within this fixed container, there is a form element that I am h ...

htmlcss

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

javascriptjqueryhtml

"Enhancing User Interaction: The Dynamic Trio of Ajax, Php, and MySql in Comment

I have successfully developed a basic commenting system, featuring a form with two fields: name and comment. Upon submitting the values, it utilizes Ajax to dynamically add the comment to the existing page without refreshing the entire content. My next ob ...

phpmysqlhtmlajaxcomments

The margin set in Bootstrap isn't making any difference

I'm currently utilizing bootstrap 4 in my react project, and while the bootstrap components seem to be functional, I am facing an issue where setting margins does not work as expected. Here is a snippet of code from one of my pages: return ( < ...

javascripthtmlcssangularjsbootstrap-4

The table will remain empty for eternity as the page is being loaded using ngRoute

Currently, I am utilising Angular routers. app.config(function($routeProvider) { $routeProvider .when('/comment/list', { templateUrl: 'commentList.htm', controller: 'mainController' }) }); ...

htmlangularjsngroute

The background image is cropped, causing a scroll bar to be added

I've been attempting to add a background image to my HTML using the code below: body { margin: 0; background: url('images/lightning.jpg') no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -mo ...

htmlcssimagebackgroundbackground-image

Python Selenium for Element Detection

I am a beginner when it comes to using Selenium and I am currently seeking guidance on how to locate the element that is highlighted in this image: https://i.sstatic.net/uXf4u.png Despite my attempts, the following code resulted in an error message being ...

pythoncssselenium

Text that is aligned to the center and justified in its presentation

Can anyone assist me with this issue? I'm having trouble understanding why my text is justified but not centered. It appears fine on larger screens, but on the iPhone screen, it is justified yet slightly off-center to the left. How can I center the te ...

htmlhtml-table

Can CSS interfere with the execution of the document ready function?

When I have a large CSS file on my page, will my document.ready execution wait for the CSS file to load? <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="large-amount-file.css"> </head ...

jqueryhtmlcss