Insert round sphere shapes in the corners of the cells on the Table

I am working on a GUI representation table that features cells with spheres in the corner. Additionally, the footer contains a plus symbol (font-awesome icon) in the corner. I have attempted to place the sphere so that it aligns only inside the cell.

Here is the target figure I aim to achieve:

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

Please assist me in resolving this issue

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
<table class="damage-chart">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td style="width: 3%"></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td style="width: 3%"></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td style="width: 3%"></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td style="width: 3%"></td>
          </tr>
       </table>

htmlcsshtml-tablecss-shapes

Answer №1

To position your spheres, you have the option to utilize CSS transformations.

If you want to add 'Plus' signs, consider using a pseudo element ::after along with content: '+' for each cell in the last row.

For a seamless look, you can implement border-collapse: collapse to eliminate any gaps between borders. Avoid inline styles by selecting the last cell of every row using :last-child selector.

.damage-chart {
  border: 3px solid #dddddd;
  width: 80%;
  padding: 0;
  margin-top: 20px;
  border-collapse: collapse;
}

.damage-chart td {
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}
.damage-chart tr td:last-child {
  width: 3%;
}

.damage-chart,
.damage-chart td {
  border-top: none;
  border-right: none;
}

.sphere {
  background: #b11a5a;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-9px, 17px);
 -ms-transform: translate(-9px, 17px); /* IE 9 */
 -webkit-transform: translate(-9px, -17px); /* Safari */
}

.damage-chart tr:last-child td {
  position: relative;
}

.damage-chart tr:last-child td::after {
  content: '+';
  font-family: Arial;
  font-size: 1.5em;
  position: absolute;
  bottom: -16px;
  left: -8px;
}
<table class="damage-chart">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td><div class="sphere"></div></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer №2

If you're facing an issue, using both position: relative and position: absolute in your code might help resolve it. Give this code a try.

<table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td><span class="sphere"></span></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
  position: relative;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
.sphere {
  background-color: red;
  position: absolute;
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  right: -7px;
  top: -7px;
  z-index: 2;
}
.plus {
  position: absolute;
  font-weight: bold;
  display: block;
  right: -8px;
  bottom: -10px;
  z-index: 2;
}

Answer №3

Tables are designed with a sophisticated mechanism that allows for quick updates of all columns to the same width and height within rows and columns. Although not instantaneous, this functionality is still present.

As a result of this feature, the various elements of a table component (<thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, <col>, <colgroup>, and <caption>) have different implementations across different browsers. Consequently, block-level properties cannot be reliably depended upon to work consistently with these elements. For instance, position:relative does not function as expected on <tr> elements (among other similar "exceptions").

Instead of trying to remember which styling attributes work with each table element, it is recommended (and safer) to use block-level elements inside table cells for positioning purposes:

td {
  position: relative;
  padding: 1rem;
  border: 1px solid #ddd;
}

.red-ball {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -8px;
  left: -8px;
  border-radius: 8px;
  background-color: #900;
}
table {
  width: calc(100% - 2rem);
  border-collapse:collapse;
  margin: 1rem;
}
<table class="damage-chart" >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
</table>

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

Add a custom filter to the active route for a stylish look

I am trying to dynamically change the color of elements in my navbar by creating a filter in my typescript code. I have a string with values like 'greyscale(73%) saturate(1400%)'. How can I apply this string to the fa-icon's filter property ...

htmlcssangular

Determining the number of columns and rows within an HTML table

Is there a way to determine the number of columns and rows in an HTML file? How can we accurately count the total number of td tags present within the HTML file? ...

c#.nethtmlwinformscount

Ways to showcase numerous products within a single category label

views.py : def get_meals(request): template = loader.get_template('café/meals.html') meal_data = MealInfo.objects.all() category_data = MealsCategory.objects.all() context = { 'meals': meal_data, ' ...

pythonhtmldjangosqlite

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

javascripthtmlcssreactjsnext.js

Instructions on creating a non-editable text area where only copying and pasting is allowed

I am looking to simply copy and paste content into a textarea without needing to make any edits within the field. <form action="save.php" method="post"> <h3>Text:</h3> <textarea name="text" rows="4" cols="50"></textarea ...

javascriptjqueryhtmlcss

What makes it possible for Vue v3 to handle variables that are undefined?

We are in the process of developing a web application that monitors analytical changes and updates them in real time. While this may not be crucial information, we thought it would be worth mentioning. If you visit Vue.js's official website at https: ...

javascripthtmlvue.js

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

htmlcss

Ways to prevent body content from overlapping with footer content and appearing below

Currently, I am utilizing an autocomplete text box where the scroll bar exceeds based on dynamic values. However, if more values are displayed in the text box, the scroll bar automatically extends to exceed the footer of the page, resulting in two scroll b ...

jqueryhtmlcssautocompleteoverflow

What accounts for the different behavior of line-height when using units vs percentage or em in this instance?

I'm puzzled by the behavior of the CSS code provided, which is also demonstrated in this fiddle. <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { ...

htmlcss

What is the best method for creating an HTML table using a JSON object?

Currently, I am in the process of developing an express app that can render a csv file and convert it into a json format. Within my method, I have this json data stored as a variable and my goal is to display it as a table on an HTML page. How can I effect ...

htmlnode.jsjsoncsvexpress

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

Removing HTML tags from a string while preserving specific tags in JavaScript

Here is a JavaScript string that I am working with: var test = "<p>test</p> FOLER.PRODUCTS<12345><level-2>"; I'm trying to remove the HTML tags from the string because the service I'm using doesn't accept them. Here ...

javascripthtml

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...

javascripthtmlinternet-explorer

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

htmlcss

"Setting up a filter for the first row in an Excel-like table using a pin header

Does anyone know how to create a table filter in Excel where the header and first row stay pinned while scrolling down, even after applying filters? Here is a JSFiddle demonstrating the issue: http://jsfiddle.net/6ng3bz5c/1/ I have attempted the followi ...

jquerycssangularjshtml-tablescroll

relocate HTML components

I've been trying to reposition HTML elements within the body of a webpage, but I'm struggling with getting a form tag to appear exactly in the center of the browser - and only that form tag. Can anyone offer guidance or suggest relevant topics fo ...

htmlcssmove

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

htmlcssreactjstypescriptmaterial-ui

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

htmlcss