I know there are many such posts, but none of the solutions works for me. I am using wordpress.com, which is extremely poor and has lots of flaws in general. So I just wonder if that is just one more "constraint" which wasn't mentioned along with the billing.
I have a simple HTML code, which works perfectly well in http://www.w3schools.com interpreter. It doesn't work when using wordpress.com.
<table border="0">
<tbody>
<tr>
<td align="center" width="90%">A</td>
<td align="center">B</td>
</tr>
</tbody>
</table>
I have tried border-collapse property as well. How to remove table borsers, or how to work around this problem?
I found the tip which works. This is wordpress.com specific issue. Solution is given here. It has to be stated
<table style="border:none;">
and in each cell
<td style="border:none;">
Have you tried this?
<table style="border: none; border-collapse: collapse;" border="0">
You can also check your styles.css and see if there are specific styles for your table.
If you want to target a specific table then just use an ID or a class instead.
.table, .td, th {
border: 0;
}
If still not working add border: 0 !important; and make sure that the css is rendered on your views by checking via inspect element...
Related
I want to get the contents of a td with a class and replace it with another content. I am not able to get the whole content within the td as it contains linebreaks.
I tried using <td class="guest_invite"([^<]*) and some other patterns. But none of theme are working
<table cellpadding="10" style="width:100%; border-collapse: collapse;font-size:13px;margin-top:20px;font-family: opensans;">
<tr>
<td class="guest_invite" style="font-size:13px;border-right: 2px solid #CCC; vertical-align:top; padding:20px 20px 0px 0px; line-height:1.5; text-align:justify;" width="60%">Dear Guest,<br>
I would like to personally thank you for choosing our Cruises. We can't wait for you to enjoy the experience of discovering many fascinating destinations in a single voyage.<br>
You will fall in love with the gorgeous resort-style amenities.<br>
Happy Cruising!
<table style="margin-left:220px;padding-top:20px;font-family: opensans;width:auto;">
<tbody>
<tr>
<td>
<div><img alt="Logo" src="/sites/default/files/2019-05/sign.png" style="height:85px;width:128px;margin-top:5px;">
<div style="font-size:10px;">Pierfrancesco Vago<br>
Executive Chairman MSC Cruises</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
You can try this code. Works in chrome console.
To get the content document.querySelector(".guest_invite").textContent; To update the content document.querySelector(".guest_invite").textContent = " your content"; OF course you must add the code inside <script></script> tags or in external js file. I would also suggest you use external stylesheets.
DOM manipulation is achieved via JS (javascript) using jQuery (simpler), not PHP (which is used to render the HTML).
Here's a small snippet to get you started:
<script>
$(function(){
$("td.guest_invite").html(/* put here whatever content you want to replace it with */);
});
</script>
Look here for more information on jQuery html method.
This is a theme, HTML or css issue. So please don't leave this when I mention "tiki". I believe it can be solved with a supposedly simple css script.
In our university page, I use the Tiki-wiki platform. Please take a look at the people page. This page consists of multiple tables, in each, there's a group of people listed.
The problem: In the previous version of Tiki, all names in the whole page were aligned without my intervention. Now in the new version of Tiki, you see that all names are not aligned. Every table has its own positioning of the names. This is the case although all tables have exactly the same html tagging and css styling and exactly same image sizes.
The fact that this worked in the previous version of tiki, made me believe that this is nothing but a styling issue, since themes also were updated.
Could you please tell me what I have to do to fix this and make all names aligned? For each table I created my own div with class name "peopletablediv".
If you require any additional information, please ask.
PS: Recreating the whole page isn't a preferred solution.
Just add
.peopletablediv .wikitable {
table-layout: fixed;
}
to your site's CSS and you're done.
In the CSS, you can specify a fixed size for the td conaining pictures :
.wikicell
{
width: 408px; /* or any convenient value here */
}
I'd try to add this to your CSS
.wikitable > tr > .wikicell:first-child{
width: 350px;
}
For an HTML solution, you could add a <colgroup> to each of the tables, just below the <table> tag:
<colgroup>
<col style="width: 380px;" />
<col colspan="2" />
</colgroup>
So the table code might look like this:
<table class="wikitable table table-striped table-hover">
<colgroup>
<col style="width: 380px;">
<col colspan="2" style="background-color:yellow">
</colgroup>
<tbody>
<tr>
<td class="wikicell"><a><img width="120" ...></a>
</td>
<td colspan="2" class="wikicell">Prof. Dmitry Budker <br><a ...>Send e-mail</a>
</td>
</tr>
</tbody>
</table>
Sorry i can't add a comment, not enough "points" still apparently, so this is more of a question than an answer...
Which version of Tiki did you upgrade to and from? (we released 4 new versions the other day) And where is "the people page", sorry, i don't see a link.
If you upgraded from Tiki 12 (say) to 13 or 14 then the whole framework has changed to Bootstrap so some extra custom CSS may well be needed to recreate previous appearances (as you suspected). Can't really tell exactly what without an example.
Hope i can improve my "answer" when i have a little more info, thanks :)
I'm having an impossible time getting border-collapse to work for me. The page I'm working with has a table in it. The table has 2 columns, one for a label and the other for data. Sometimes there is no data to display, but I still need to rendor the table row and label column because I have a JQuery script that might need to write data to the data column. In other words, regardless of whether there is data or not, I need to rendor the table row as a placeholder. If there is no data I want the row to collapse.
In the html below, visibility:hidden is working since I won't see the label 'Condition:', but the row doesn't collapse. I've tried looking at it in FireFox 13, Safari 5 and IE 8. All three show the same problem - the row never ccollapses even though it doesn't display anything.
#data
{
font-size: 95%;
}
#data table
{
border-collapse: collapse;
margin-top: 15px;
margin-bottom: 15px;
}
#data table td
{
padding-left: 5px;
}
<div id="data">
....
<table>
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
....
</div>
What more do I need to do to make this happen? I'd like it to be cross-browser compatible. I'm trying to support IE7 and above. I'm guessing someone is going to give me hell for using a table in the first place... ;)
The visibility property determines whether a given element is visible
or not (visibility="visible|hidden"). However, when visibility is set
to hidden, the element being hidden still occupies its same place in
the layout of the page.
Display VS Visibility
use display:none; to hide and display:block; to show
<table style="border-collapse:collapse;">
<tr style="display:none;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
Note: border-collapse:collapse; is used in a situation, where you have borders specified for container and the contained and you want border to be displayed once.
<table border="0" cellpading="0" cellspacing="0">
and try to use and &nbps; or something like that, if you don't have data in a cell
something like:
<table border="0" cellpading="0" cellspacing="0">
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"> </td>
</tr>
</table>
I'm working with a content management system that doesn't allow me to alter the head of the pages I'm working with. The page I'm creating will be edited by others using a WYSIWYG editor and will include a table where users can upload new documents. I want to style this with CSS so that I can give one command to put a line between each row (and this won't need to be done every time by each user - since they likely won't know how), but every time I do this it doesn't show anything. My code attempt is below, is this possible?
<table width=600px cellSpacing=2 cellPadding=2 style="td {border-bottom: solid 1px black;" }">
Not that I'm aware of. But you can do this
<style type="text/css">
.specialtable td {
border-bottom: 1px solid black;
}
</style>
<table width=600px cellSpacing=2 cellPadding=2 class="specialtable">
...
</table>
This will ensure that only this specific table's <td/> elements will be styled according to your needs. Note: according to the w3c specs, <style/> is only allowed within the <head/> element of your document. But in many browsers, it still works if you put it anywhere in the <body/>. Since you're looking for a kind of hack, this may be a viable solution for you
You can use frame and rules, two lesser-known attributes of the table element.
<table cellpadding="3" cellspacing="0" frame="below" rules="rows">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
See jsFiddle.
Or if you only want lines in between the rows and not below the bottom one, leave out frame="below".
This won't work in all browsers though.
I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:
I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.
According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)
Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.