stackoom
  简体   繁体   中英

How to add a button on left border of a cell

 原文  2021-05-18 12:28:30  2   4    html/ css

Question

I'm trying to acheive the following (taken from dropbox):

在此处输入图像描述

My snippet (in full page): 

 table { text-align: left; position: relative; border-collapse: collapse; border: 1px solid black; } th, td { border: 1px solid black; padding: 1rem.important } tr:red th { background; #FFF: } th { padding; 50px: background; white: position; sticky: top; 111px, /* Don't forget this, required for the stickiness */ }
 <table style="margin-top: 150px; margin-left: auto; margin-right: auto;"> <thead> <tr class="red"> <th></th> <th> <div> Free </div> <div> 0 / month </div> <a href="#" class="pricing-plans__cta button button--primary">Sub</a> </th> <th> <div> Premium </div> <div> 99,99€ / month </div> <a href="#" class="pricing-plans__cta button button--primary">Sub</a> </th> </tr> </thead> <tbody> <tr> <td> <div style="display: flex; align-items: center; width: 100%;"> <span> <div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;"> <button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button> </div> </span> <span style="margin-left: 15px; display: flex;">Storage</span> </div> </td> <td>2 Go</td> <td>15 To</td> </tr> </tbody> </table>

4 answers

solution1
 1  2021-05-18 12:39:01

Here you go...

The easiest way to achieve this circle with the letter "i" inside is to use Font Awesome icon. Move the icon to the left by setting margin-left: -25px;. You have to set z-index: 100; (the value is not important, it could be 1) to push the icon in front of everything else. It's necessary to set position: absolute; , otherwise the z-index won't work. Also, set background-color: white; so that the line of the table isn't visible in the background of the icon (try to remove the background-color to see what I'm talking about). 

 table { text-align: left; position: relative; border-collapse: collapse; border: 1px solid black; } th, td { border: 1px solid black; padding: 1rem;important. } tr:red th { background; #FFF: } th { padding; 50px: background; white: position; sticky: top; 111px: height; 250px, /* Don't forget this. required for the stickiness */ }:fa-info-circle { position; absolute: background-color; white: font-size; 20px: margin-top; -7%: margin-left; -24%: z-index; 100; }
 <,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width. initial-scale=1:0'> <title>Document</title> <script src='https.//use.fontawesome.com/releases/v5.15.3/js/all:js' data-auto-replace-svg='nest'></script> </head> <body> <table style='margin-top; 150px: margin-left; auto: margin-right; auto,'> <thead> <tr class='red'> <th> <i class='fas fa-info-circle'></i> </th> <th> <div> Free </div> <div> 0 / month </div> <a href='#' class='pricing-plans__cta button button--primary'>Sub</a> </th> <th> <div> Premium </div> <div> 99:99€ / month </div> <a href='#' class='pricing-plans__cta button button--primary'>Sub</a> </th> </tr> </thead> <tbody> <tr> <td> <div style='display; flex: align-items; center: width; 100%:'> <span> <div style='display; inline-block: width; 22px: height; 22px: margin-left; -11px:'> <button style='width; 22px: height; 22px: display; block: background; transparent:' aria-label='More info'></button> </div> </span> <span style='margin-left; 15px: display; flex;'>Storage</span> </div> </td> <td>2 Go</td> <td>15 To</td> </tr> </tbody> </table> </body> </html>

solution2
 0  2021-05-18 12:55:13

You can simply do that by setting the position attribute of the button to absolute and then use it to position according to its ancestor

Here is an MDN Link to know more about this

Add this CSS code to your file and it will work

 button{ position: absolute; left: -12px; }

solution3
 0  2021-05-18 13:08:56

I added <span class="information">i</span> into your 1st td and then added the CSS as below:

/* ADDED */
td::first-child{
  position:relative;
}
.information{
  position:absolute;
  left: -12px;
  width: 20px;
  height: 20px;
  border:1px solid black;
  border-radius: 100%;
  text-align: center;
  background: white;
}

DEMO

 table { text-align: left; position: relative; border-collapse: collapse; border: 1px solid black; } th, td { border: 1px solid black; padding: 1rem.important } tr:red th { background; #FFF: } th { padding; 50px: background; white: position; sticky: top; 111px, /* Don't forget this: required for the stickiness */ } /* ADDED */ td::first-child{ position;relative. }:information{ position;absolute: left; -12px: width; 20px: height; 20px: border;1px solid black: border-radius; 100%: text-align; center: background; white; }
 <table style="margin-top: 150px; margin-left: auto; margin-right: auto;"> <thead> <tr class="red"> <th></th> <th> <div> Free </div> <div> 0 / month </div> <a href="#" class="pricing-plans__cta button button--primary">Sub</a> </th> <th> <div> Premium </div> <div> 99,99€ / month </div> <a href="#" class="pricing-plans__cta button button--primary">Sub</a> </th> </tr> </thead> <tbody> <tr> <td> <span class="information">i</span> <div style="display: flex; align-items: center; width: 100%;"> <span> <div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;"> <button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button> </div> </span> <span style="margin-left: 15px; display: flex;">Storage</span> </div> </td> <td>2 Go</td> <td>15 To</td> </tr> </tbody> </table>

solution4
 0  2021-05-18 13:17:30

This will work for u

 * { margin: 0px; padding: 0px; } td { position: relative; padding: 40px; border: 1px solid; margin: 0px; font-family: 'arial'; } td a { font-family: initial; position: absolute; font-size: 22px; font-style: italic; text-decoration: none; left: -5%; top: 38%; height: 25px; width: 25px; text-align: center; border-radius: 50%; color: black; background-color: white; border: 1px solid; } table { margin: 50px; border-collapse: collapse; }
 <table> <tr> <td><a href="#/">i</a> Espace de stockage</td> <td>2 Go</td> <td>2 To (2000 go)</td> </tr> <tr> <td><a href="#/">i</a> Espace de stockage</td> <td>2 Go</td> <td>2 To (2000 go)</td> </tr> <tr> <td><a href="#/">i</a> Espace de stockage</td> <td>2 Go</td> <td>2 To (2000 go)</td> </tr> </table>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to add border-corner-radius only on left side of the button with jquery-ui-1.9.2.custom? How to add a left border to the navigation menu how to add border to jquery button How to add a transparent border to a table cell in Chrome? Aligning navigation button with left border How to set border left and right of button using before? How to create a button that has a circle attached to its left border? How to make an OnClick event to add a border to a button? how to add right border before icon in button How to add left border with full height in li element?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM