I am trying to create a table with rows starting from different positions like this
12345
678910
This is my code
<table class="center">
<tr style="padding-right: 22%">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr style="padding-left:18px">
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Unfortunately, the padding does not seem to work as intended
Consider adding the number of empty columns to the beginning of each row.
var table = document.getElementById('table');
var rows = table.querySelectorAll('tr');
var i = 0;
var j = 0;
for (i = 0; i < rows.length; i++) {
for (j = 0; j < i; j++) {
var td = document.createElement('td');
td.innerText = ' ';
rows[i].prepend(td);
}
}<table id="table" class="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</table>The issue appears to be related to the default display setting for <tr> elements.
By applying display:block to the <tr> element, the padding attribute should function as expected.
<table class="center">
<tr style="display:block">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr style="display:block; padding-left=10px">
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
This should produce the following output:
1 2 3 4 5
6 7 8 9 10
It is important to note that using the display property in this manner may impact other aspects of the table element.
Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...
I am looking to showcase a model created in Blender on a webpage. The issue is that the rendered quality of the model seems poor, especially with the edges not being properly displayed. Interestingly, when viewing the model in an online viewer, the edges a ...
JSBIN Is it possible to center the number row without using JavaScript to calculate its position, considering its parent has a fixed attribute? I've tried using CSS properties like margin and text-align with no success. Any suggestions on achieving t ...
I am currently working on a form and trying to validate it using my own code. Even though I can successfully retrieve values for radio buttons by triggering an alert when clicked, the form validator keeps returning these radio values as undefined. What cou ...
I am looking to change a banner on click functionality. Currently, I have hidden the 2nd banner and banner 1 is displayed. When the arrow is clicked, I want banner 1 to hide and banner 2 to show. The challenge is that I attempted using HTML for this task. ...
Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...
I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...
In my Bootstrap website (built with Bootstrap 4), I have a button that triggers a modal and transfers the data from the button to the form inside the modal using the following function: $('#exampleModal').on('show.bs.modal', function ( ...
Incorporating Bootstrap's 4 responsive tables has proven beneficial for displaying tabular data. However, a challenge arises when some data cells are required to hold a substantial amount of information, such as a couple of lengthy sentences. In these ...
I'm seeking assistance with my navbar code which includes some PHP scripts. The issue I'm encountering is that the text is aligning to the right, and I haven't been able to find a solution for it yet. I will upload the CSS file later after p ...
I've encountered an issue while working with mat-autocomplete. My function is not functioning properly when I select an item from the drop-down list. It seems like I need to pass the add() function in my select, but I'm receiving an error stating ...
After examining the form below, my goal is to center only the fields while keeping the navigation buttons in their original position. Specifically, I want only the tab-content to be centered, excluding the tablists. <link rel="stylesheet" href="https ...
Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...
Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...
I am using a fancybox-media box to display Vimeo and YouTube videos. I want to add a caption below the video with some content related to it. Is there a way to do this? Below is the JavaScript code I am using: Fancybox function: $("#clpbox").click(functi ...
I understand that absolute positioning disrupts the normal flow of elements, but I expected the display order to reflect the order in which elements are placed in the HTML code. .absolute { position: absolute; width: 100px; height: 100px; ...
Within my QML Text (RichText) elements, I have incorporated multiple CSS-styled html elements using the inline 'style' attribute within each tag (e.g. <code style=\"background-color:black; text-indent: 10px\"></code&g ...
I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...
Currently, I am in the process of developing a React app that includes a navigation bar. The issue at hand is that the content within my h1 tags and other elements are overlapping with the navigation bar - meaning that they are not properly contained withi ...
After searching for answers with no luck, I ended up coming here to ask my question. Here is the code snippet in question : <a href="manage/10000' . $user["user_id"] . ' " class="user_grop">More Info</span></a> I am wondering ...