I am working with Python to generate some nice HTML styled with CSS. Right now I would like to add tooltip where the cells are missing in a particular column. I encoded the missing cells in a empty string like this -> "" before rendering the HTML with Pandas. I would like to leverage on the use of Beautiful Soup in Python to capture those missing cells in a particular column.
You can think of the HTML like the image below, where I am interested in capturing the cells encoded with "" ie missing cells in col4
Here is my idea inspired from here:
import re
soup = BeautifulSoup(styler.render(), "html.parser")
columns = soup.findAll('td', text = re.compile(''))
columns
Viewing the columns object in Python shows that it captures the whole cells in a row where col4 is encoded with "". I would instead like to capture only those cells in just col4 that is encoded in "" so that I can easily implore other ways to add a tooltip to the cell.
I welcome other efficient ways to do this instead. Your thoughts, ideas, and references are all welcome.
Many thanks
EDIT:
Jack suggested I access the Pandas DataFrames to capture the missing cells. I already did this earlier and this did not work, here what I did:
empcells = df["col4"][df["col4"] == ""]
styles = [
#table properties
dict(selector="",
props=[("margin","0"),
("font-family",'calibri'),
("font-size", "20px"),
("border-collapse", "collapse"),
("border", "2px solid #ccf"),
('text-align', 'center'),
("width", "auto !important"),
("overflow", "hidden")
]),
# drop down menu
dict(selector="select",
props=[("width", "100%"),
("height", "24px"),
("border-radius", "15px"),
("box-shadow", "0 5px 25px rgba(0, 0, 0, 0.3)")]),
dict(selector="td %s" %(empcells),
props=[
("display", "inline"),
("position", "relative"),
("background", "#333"),
("background", "rgba(0,0,0,.8)"),
("border-radius", "5px)"),
("bottom", "26px"),
("color", "#fff"),
("left", "20%"),
("padding", "5px 15px"),
("position", "absolute"),
("z-index", "98"),
("width", "220px")
]),
#header color - optional
dict(selector="thead",
props=[("background-color","#104374"),
("padding", ".1em"),
("position", "sticky"),
("top", "0")
]),
dict(selector="tbody",
props=[("overflow-x","hidden")
]),
#background shading
dict(selector="tbody tr:nth-child(even)",
props=[("background-color", "#fff")]),
dict(selector="tbody tr:nth-child(odd)",
props=[("background-color", "#eee")]),
#cell spacing
dict(selector="th, td",
props=[("padding", "2px"),
('text-align', 'center')]),
#header cell properties
dict(selector="th",
props=[("font-size", "30%"),
("background-color","#104374"),
("color", "white"),
("font-size", "20px"),
("padding", ".6em"),
("text-align", "center"),
("position", "sticky"),
("top", "0"),
("margin","0")]),
#render hover last to override background-color
hover()
]
Correct me if something is not right.
