How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)?
*(limiting to only HTML or a combination of HTML and CSS)
** The goal is to print the character "." across the entire length of the cell, without knowing its exact width!
Once you provided more details about your question, I was able to come up with a solution. A div with a dashed bottom border and text displayed on top with a white background.
Here is an example:
CSS:
.line{
border-bottom:1px dashed black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .price{
position:absolute;
right:0;
}
HTML:
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
By chance, I stumbled upon this question and felt compelled to share my own solution.
For a few years now, I have been using this technique and I appreciate its simplicity. The concept involves using float: left|right for text elements while the surrounding block element creates a margin. To optimize this method, we add overflow: hidden to the block element.
Furthermore, a notable enhancement is using the ::after pseudo-class instead of an actual block element. This choice is logical as the ellipsis should behave as part of the stylesheet.
.line {
padding: 60px 0;
}
.title {
float: left;
}
.price {
float: right;
}
.line::after {
content: "\0020";
display: block;
min-height: 1em;
border-bottom: 1px dotted;
overflow: hidden;
}<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>If programming is your thing, why not experiment with a snippet like this:
var keyword = [keyword];
var x = keyword[0].getBoundingClientRect().width;
while(x === keyword[0].getBoundingClientRect().width){
keyword[0].innerHTML += '-';
};
keyword[0].innerHTML = keyword[0].innerHTML.replace('-', '');
Have you considered using a background image with the repeat-x property?
background:url(character.png) repeat-x;
When working with raw HTML (without any server-side processing), you'll need to manually repeat characters. However, if you're using a server-side language such as PHP or JSP, you have the option to repeat characters manually or use loops for efficiency. Keep in mind that client-side operations cannot achieve this functionality unless JavaScript is used.
Is there a way to utilize the HTML5 geolocation API to determine if a user is located in a specific area? I'm considering setting a central latitude and longitude and creating a radius around it, so the site will function as long as the user is within ...
I am interested in developing a web application that can receive status updates (text) from an Android device. My plan is to use Ajax and HTML for this project. I'm looking for guidance on how to dynamically update the status on the web page without r ...
Could someone provide a JavaScript syntax for detecting the presence of a scrollbar in the DOM by measuring the body height and window height? ...
I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...
I'm facing a challenge embedding a camera feed into a webpage that needs to display manual focus and servo controls. The issue lies in the content scaling within the iframe. Even though the iframe boundary resizes according to the window's width ...
I need help with a function that reflects data entered in one text box to another text box when a checkbox is ticked. The checkbox is initially checked and the values should change when it is unchecked and then checked again. Currently, the code is only ou ...
Google web fonts presents the Droid Serif font in these styles: DroidSerif.ttf DroidSerif-Bold.ttf DroidSerif-BoldItalic.ttf DroidSerif-Italic.ttf I am interested in using the @font-face CSS rule to import all of these variations with the "Droid Serif" f ...
Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...
I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...
I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...
I am currently facing a challenge while working on a table with an expand more option to display additional details for each specific row. I have implemented a slider to facilitate the expansion of the table. Presently, my ExpandToggle component is embedde ...
https://i.sstatic.net/p7PvH.png The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...
My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...
The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...
I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...
I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...
Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...
I'm in the process of scraping a review page similar to this one. While this specific page has only a few reviews, there are others with a larger volume that require extensive scrolling. Upon observation, I noticed that when the page is not complete ...
I'm looking to enhance my form by adding input fields dynamically through the JavaScript function when I click on the add button: let i = 0; function increment() { i += 1; } function addFieldFunction() { let newDiv = document.createElement(&apos ...
I encountered a strange issue where the code below works perfectly fine when directly pasted into the browser (chrome console). However, it does not work when executed from my source file. <script type="text/javascript" > $(".test").click( ...