Force rows onto a new column in HTML (or javascript?) by setting a max of 5 rows per column - html-table

On our website, we have a table with 5 rows and 3 columns.
https://www.bakashana.org/sponsor-a-young-woman
The table is in HTML. The problem is that when we get a new girl to sponsor, we put her at the beginning (top left of the table, the first column and row). This means I have to take the last row entry (picture) from each column and move it down to be the first row entry in the next column. This is a big hassle and takes lots of time.
I am looking for an easy solution which will allow me to simply add another girl's picture (row) at the beginning of the table, and have the table automatically force the rest of the rows to adjust (keeping only 5 rows in each column, and creating a new column if necessary to accommodate all the rows).
Thanks!
Site Code:
<table class="girlstable" style="background:transparent; vertical-align:top;">
<tr style="background:transparent;">
<td>[caption id="attachment_6483" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/highcompress-Christine-thumbnail-150x150.jpg" alt="christine zambia scholarship kasama" width="100%" height="100%" class="size-thumbnail wp-image-6483" /> Christine Mupeseni[/caption]</td><td>[caption id="attachment_6495" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/12/Joan-Chonto-Headshot-compressor.jpg" alt="Kasama sponsorship zambia" width="100%" height="100%" class="size-full wp-image-6495" /> Joan Chonto[/caption]</td><td>[caption id="attachment_6490" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/Catherine-Mwansa-headshot-compressor.jpg" alt="Sponsor young Zambian woman Catherine" width="100%" height="100%" class="size-full wp-image-6490" /> Catherine Mwansa[/caption]</td><td>[caption id="attachment_6486" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/11/highcompress-elizabeth-muma-thumbnail-150x150.jpg" alt="Elizabeth scholarship kasama" width="100%" height="100%" class="size-thumbnail wp-image-6486" /> Elizabeth Muma[/caption]
</td><td>[caption id="attachment_6498" align="aligncenter" width="100"]<img src="https://www.bakashana.org/wp-content/uploads/2019/12/Catherine-Chipanta-headshot-compressor.jpg" alt="girl child assistance catherine" width="100%" height="100%" class="size-full wp-image-6498" /> Catherine Chipanta[/caption]</td></tr>
<tr style="background:transparent;"><td>[caption id="attachment_3836" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Priscilla-Mulenga-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3836" /> Priscilla Mulenga[/caption]</td><td>[caption id="attachment_3837" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Sara-Kanyantag-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3837" /> Sara Kanyanta[/caption]</td><td>[caption id="attachment_3702" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Kasonde-Marvel-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3702" /> Kasonde Marvel[/caption]</td><td>[caption id="attachment_4900" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2019/03/Jane-Kampamba.jpg" alt="" width="100%" height="100%" class="size-full wp-image-4900" /> Jane Kampamba[/caption]</td><td>[caption id="attachment_4899" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2019/03/lastage.jpg" alt="" width="100%" height="100%" class="size-full wp-image-4899" /> Lastage Musonda[/caption]</td>
</tr>
<tr>
<td>[caption id="attachment_3731" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Costance-Mulenga-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3731" /> Constance Mulenga[/caption]</td><td>[caption id="attachment_3835" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Vanessa-Kapembwa-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3835" /> Vanessa Kapembwa[/caption]</td><td>[caption id="attachment_3704" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/02/Violet-Chilufya-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3704" /> Violet Chilufya[/caption]</td><td>[caption id="attachment_3800" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/06/Joyce-Chileshe-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3800" /> Joyce Chileshe[/caption]</td><td>[caption id="attachment_3845" align="aligncenter" width="100%"]<img src="https://www.bakashana.org/wp-content/uploads/2018/09/Regina-150x150.jpg" alt="" width="100%" height="100%" class="size-thumbnail wp-image-3845" /> Regina Chokwe[/caption]</td>
</tr></table><hr />

Related

How to retrieve the css property of an element whose css value is dynamically changing?

In our browser developer tools there is no id, so we are using css value. But css value (css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20]) is changing dynamically. so we are getting an error message stating
Element with locator css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20] not found.
<tr _ngcontent-c5="" class="item-name highlighted" tabindex="0">
<td _ngcontentc5="">
<div _ngcontent-c5="" class="svg-size cursor" style="text-align:center;
padding-top:12px;">
<mat-icon _ngcontent-c5="" class="mat-icon" role="img" svgicon="common:estimatetmp" aria-hidden="true">
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="__26Nzx83__estimate-tmp-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="__26Nzx83__Group-2">
<rect id="__26Nzx83__Rectangle-4-Copy-2" fill="#FFFFFF" x="0" y="0" width="32" height="32"></rect>
<g id="__26Nzx83__Group" transform="translate(4.000000, 4.000000)">
<rect id="__26Nzx83__Rectangle-3" fill="#9013FE" opacity="0.25" x="0" y="0" width="24" height="24" rx="2">
</rect>
<text id="__26Nzx83__E" font-family="OpenSans-ExtraBold, Open Sans" font-size="18" font-weight="600" fill="#FFFFFF">
<tspan x="7" y="19">E</tspan>
</text>
</g>
</g>
</g>
</svg>
</mat-icon>
</div>
</td>
<td _ngcontent-c5="" class="fontStyle" data-placement="top" title="Untitled Estimate 74"> Untitled Estimate 74 </td>
<td _ngcontent-c5="" class="fontStyle">venkatesh kumar</td>
<td _ngcontent-c5="" class="fontStyle">Oct 31 2018 11:28 AM</td>
<td _ngcontent-c5="">
<div _ngcontent-c5="" class="dropdown">
<div _ngcontent-c5="" class="options more-icon item-name" data-placement="top" data-toggle="dropdown" style="color: black; font-size: 24px;">
</div>
</div>
</td>
</tr>
How to handle this? Shall we tried using class name"(class=item.highlighted) instead of css and id but couldn't locate.

Gmail Adding STRANGE padding on rows after first row for my HTML signature

As the title suggests, if any other device receives the signature, it renders fine. but in gmail, it has this weird padding added to the rows. but only the rows AFTER the first row. The first row is perfect. If anyone can help me figure this one out I would be greatful!
I know the gap color is green. I use the green background to show me where there is a bleeding effects between the images.
<table border="0" bgcolor="green" cellspacing="0" cellpadding="0" style="border: none;">
<tr>
<td width="176" height="115" style="border:none">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" width="176" height="115">
</td>
<td width="623" height="115" style="border:none;">
<img src="https://www.htref.co.za/signatures/images/img01.png" width="623" height="115">
</td>
</tr>
<tr>
<td width="176" height="25" style="border:none;">
<img src="https://www.htref.co.za/signatures/images/img02-01.png" width="176" height="25" style="display:block;">
</td>
<td width="623" height="25" style="border:none;">
<img src="https://www.htref.co.za/signatures/images/img03-01.png" width="623" height="25" style="display:block;">
</td>
</tr>
<tr>
<td width="176" height="25" style="border:none;">
<img src="https://www.htref.co.za/signatures/images/img02-01.png" width="176" height="25" style="display:block;">
</td>
<td width="623" height="25" style="border:none;">
<img src="https://www.htref.co.za/signatures/images/img03-01.png" width="623" height="25" style="display:block;">
</td>
</tr>
</table>
Example shown of gaps in the table rows:

Bottom spacing between tables

I'm building an email and have run into a problem where there seems to be automatic spacing at the bottom between two tables.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>
I've included tags such as: cellpadding cellspacing border and gave them a value on zero, which I though would have solved the problem, however that wasn't the case.
Add style="display: block;" to the image. (See Why does my image have space underneath? for a deeper explanation)
A quick glance at your code shows me you're going to have a lot more problems with email clients. I would strongly suggest testing before sending using a service like Litmus.
http://litmus.com
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="https://imgur.com/6zCGwNt.png" style="display: block;" />
</td>
</tr>
</table>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<table width="800px" cellpadding="50" cellspacing="0" border="0" align="center" bgcolor="#10141f">
<tr>
<td>
<h2 style="font-weight:300" align="center">
<font face="verdana" color="#fff" size="5">This is where the video will be added.</font>
</h2>
</td>
</tr>
<tr>
<td>
<video width="700px" height="359" controls poster="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg" src="https://www.w3schools.com/html/mov_bbb.mp4">
<!-- fallback 1 -->
<a href="https://www.emailonacid.com" ><img height="176" src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</video>
</td>
</tr>
</table>
</table>

HOWTO: beautifulsoup4 delete content and tags through find or the find_all

I come through the matter,while i found out the tags and contets via the find,the problem is how to delete it,here is my example:
html="""<a href="http://digi.tech.com/a/20160621/050783.htm" rel="nofollow" <table cellpadding="0" cellspacing="0" class="atd"><tbody><tr><td id="article_content"><p align="center" class="pageLink">
</p>
</td></tr></tbody></table>
<p style="text-align: center;"><img alt=" " data-bd-imgshare-binded="1" height="220" src="/skin/vr186/images/wxin.jpg" width="220"/></p>
<p style="text-align: center;"><span style="color: rgb(102, 204, 204);"><strong>every day 5</strong></span></p>
<div id="click_div"><div class="left_boxs_tit4"><div class="blank10"></div>
<a name="pl"></a>
<div class="blank20"></div><div class="feelings"><iframe frameborder="0" height="200" id="mood_frame" marginheight="0" marginwidth="0" scrolling="no" src="/e/extend/mood/?classid=2&id=4559" width="538"></iframe></div></div></div>"""
I now can use the following get the contents and tags above
a = beautifulsoup(html)
fst = a.find(class_="atd")
next_siblings = fst.find_next_siblings()
to get the strings below:
<table cellpadding="0" cellspacing="0" class="atd"><tbody><tr><td id="article_content"><p align="center" class="pageLink">
</p>
</td></tr></tbody></table>
<p style="text-align: center;"><img alt=" " data-bd-imgshare-binded="1" height="220" src="/skin/vr186/images/wxin.jpg" width="220"/></p>
<p style="text-align: center;"><span style="color: rgb(102, 204, 204);"><strong>every day 5</strong></span></p>
<div id="click_div"><div class="left_boxs_tit4"><div class="blank10"></div>
<a name="pl"></a>
<div class="blank20"></div><div class="feelings"><iframe frameborder="0" height="200" id="mood_frame" marginheight="0" marginwidth="0" scrolling="no" src="/e/extend/mood/?classid=2&id=4559" width="538"></iframe></div></div>
but , i can't delete it via the del a['tag_name'] , because it is one small part of a long article, how to delete the tag and its contents by its id ???
You just need to select the element and extract it:
html="""<a href="http://digi.tech.com/a/20160621/050783.htm" rel="nofollow" <table cellpadding="0" cellspacing="0" class="atd"><tbody><tr><td id="article_content"><p align="center" class="pageLink">
</p>
</td></tr></tbody></table>
<p style="text-align: center;"><img alt=" " data-bd-imgshare-binded="1" height="220" src="/skin/vr186/images/wxin.jpg" width="220"/></p>
<p style="text-align: center;"><span style="color: rgb(102, 204, 204);"><strong>every day 5</strong></span></p>
<div id="click_div"><div class="left_boxs_tit4"><div class="blank10"></div>
<a name="pl"></a>
<div class="blank20"></div><div class="feelings"><iframe frameborder="0" height="200" id="mood_frame" marginheight="0" marginwidth="0" scrolling="no" src="/e/extend/mood/?classid=2&id=4559" width="538"></iframe></div></div></div>"""
soup = BeautifulSoup(html)
fst = soup.find(class_="atd")
fst.select_one("#click_div").extract()
print(fst)
Which will give you:
<a cellpadding="0" cellspacing="0" class="atd" href="http://digi.tech.com/a/20160621/050783.htm" rel="nofollow"><tbody><tr><td id="article_content"><p align="center" class="pageLink">
</p>
</td></tr></tbody>
<p style="text-align: center;"><img alt=" " data-bd-imgshare-binded="1" height="220" src="/skin/vr186/images/wxin.jpg" width="220"/></p>
<p style="text-align: center;"><span style="color: rgb(102, 204, 204);"><strong>every day 5</strong></span></p>
</a>
You can use fst.find(id="click_div").extract()if you prefer, the outcome will be the same.

VB.net Single row list view across multiple lines

Is it possible to line break a listview control set to single row in visual studio similar to a wordwrap? So the line break occurs when a certain width is exceeded by the text, not where a certain number of results is exceeded (eg displaying the results as columns)
ie:
Matthew Chrinstina Fankie Daniel Angela James Simon Laura
as
Matthew Chrinstina Fankie
Daniel Angela James Simon
Laura
not
Matthew Chrinstina Fankie
Daniel Angela James
Simon Laura
Here is my asp which displays as a single row with alternating values embolden:
<div class="ExcludedStudent">
<asp:Label ID="lvlExcludedStudents" runat="server" CssClass="boldlabel" Text="Students excluded from the Progress Measure:"></asp:Label>
<asp:ListView ID="lvExcludedStudents" runat="server" DataSourceID="dsExcludedStudents">
<AlternatingItemTemplate>
<td runat="server" style="">
<asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' Font-Bold="True" />
<br />
</td>
</AlternatingItemTemplate>
<EmptyDataTemplate>
<table style="">
<tr>
<td>None.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<td runat="server" style="">
<asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' />
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholderContainer">
<td runat="server" id="itemPlaceholder">
</td>
</tr>
</table>
<div style="">
</div>
</LayoutTemplate>
</asp:ListView>
<asp:SqlDataSource ID="dsExcludedStudents" runat="server" ConnectionString="<%$ ConnectionStrings:MaltingsConnectionString %>" SelectCommand="spExcludedStudents" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="DdlYear" Name="StuYear" PropertyName="SelectedValue" Type="String" />
<asp:ControlParameter ControlID="ddlDataCollection" Name="DataCollection" PropertyName="SelectedValue" Type="String" />
<asp:ControlParameter ControlID="DdlSubject" Name="SubjectName" PropertyName="SelectedValue" Type="String" />
<asp:ControlParameter ControlID="DdlTeachingGroup" Name="TeachingGroup" PropertyName="SelectedValue" Type="String" />
<asp:ControlParameter ControlID="ddlSubgroup" Name="Subgroup" PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
I found exactly what I was looking for here:
How to display UL elements as a flat comma-separated list
First set the listview to a bulleted list and then add the below to the CSS.
/*css to comma separate the unordered list*/
ul li{
display:block;
float:left;
_display:inline;
_float:none;
}
ul li::before{
content:",";
white-space:pre;
}
ul li:first-child::before{
content:"";
}
ul li:last-child::before{
content:" and";
white-space:pre;
}
ul + *{
clear:left;
}