Inline CSS - blanco regels verhinderen

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Onderstaande code wordt geacht de tekst weer te geven over 3 regels - waarvan de 1ste regel deels doorgehaalde tekst + deels niet doorgehaalde tekst - de teksten op de 2de en op de 3de regel mogen niet doorgehaald zijn.

Resultaat van de code :
de bedoelde niet doorgehaalde tekst van de 1ste regel komt in een nieuwe regel
de volgende regels zijn doorgehaald wat ook niet de bedoeling is.

Code:
 <TD width="184" valign="baseline" style="margin-top: 0px; margin-bottom: 0px; text-decoration: line-through; text-decoration-color: red; font-weight: normal; color: grey;">
1ste regel = doorgehaalde tekst 
<p style="margin: 0; text-decoration: none;"> 1ste regel = niet doorgehaalde tekst</p>
<i>2de regel = niet doorgehaald </i>
<font color="red">3de regel =ook niet doorgehaald</FONT></TD>

Kan ik deze inline code corrigeren ?
Dank voor tips
 
Met welke reden in je hoofd gebruik je in-line CSS?
 
En waarom staat er een <p> tussen je <td> tags.

Probleem bij HTML, CSS is nog steeds dat de standaard goed beschreven is. Wat echter ontbreekt is foutafhandeling. Oftewel, als je je niet aan de standaard houd dan geeft elke browser zijn eigen invulling aan de oplossing. En dan kan het dus gebeuren dat er in verschillende browsers iets onverwachts gebeurd.
 
Probleem misschien iets concreter.
Hoe kan ik met 'style' in onderstaande code zorgen dat
"Dit is " in het zwart afgedrukt wordt én "tekst" op dezelfde regel komt maar in een andere kleur ?

Code:
<%if left(rs("Tekst"),1)="(" then%>
	<p style="margin: 0; font-weight: normal; color: black;">
	<%response.write ("Dit is  ")%>
<%else%>
	<p style="margin: 0; font-weight: normal;"> 
<%end if%>

<p style="margin: 0; font-weight: normal;">
<%=rs("Tekst")%>
 
Laatst bewerkt:
Sorry voor zelfde vraag : hoe kan ik met 'style' in onderstaande code zorgen dat
"Dit is " in het zwart afgedrukt wordt én "tekst" op dezelfde regel maar in een andere kleur (zonder gebruik te maken van <font face="arial" size="2" color="...") ?

Code:
<%if left(rs("Tekst"),1)="(" then%>
	<p style="margin: 0; font-weight: normal; color: black;">
	<%response.write ("Dit is  ")%>
<%else%>
	<p style="margin: 0; font-weight: normal;"> 
<%end if%>

<p style="margin: 0; font-weight: normal;">
<%=rs("Tekst")%>

RogerS gaf de juiste hint : die <p ... is overbodig en zorgt altijd voor een line feed = standaard CSS
 
Opmaak komt in de stylesheet of in de <head> sectie.
Code:
<style>
td {
  vertical-align: baseline;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  color: grey;
}
.line-through {
  text-decoration: line-through;
}
.text-red {
  color: red;
}
</style>

De structuur en content komt in de <body>
Code:
<td width="184">
  <span class="text-red">1a. rode tekst</span>
  <span class="line-through text-red">1b. doorgehaalde rode tekst</span>
  <br><em>2. cursieve grijze tekst</em>
  <br><span class="text-red">3. rode tekst</span>
</td>

Als je op deze manier een scheiding maakt zijn ze beide veel beter leesbaar en kan je elke class overal in de html gebruiken. Bijvoorbeeld "text-red" kan je overal gebruiken nadat je deze eenmalig hebt gedefinieerd in de style.

Tip: gebruik recente html & css informatie voor een goede notatie van je code.

mozilla.org
HTML https://developer.mozilla.org/nl/docs/Web/HTML
CSS https://developer.mozilla.org/nl/docs/Web/CSS

w3schools.com
HTML https://www.w3schools.com/HTML
CSS https://www.w3schools.com/CSS


* width="184" hoort ook in de style als width: 184px; maar de totale structuur is niet gegeven, daarom zo gelaten.
 
Laatst bewerkt:
Graag gedaan. Kijk ook mijn post #3 voor een "standaard" tabel style die je verder kunt vormgeven.
 
Dank bron voor de CSS-voorbeeldtabel.
Het onderscheid maken in twee (of meer) tabellen vb. tabel A met zebrastripes - B zonder - C zonder - D met … is mij evenwel nog niet zo duidelijk.
Dank voor tips.
 
Onderscheid maken doe je meestal met een "class" of met een "id".
Eerst eenmalig een stukje standaard css die van toepassing is op elke tabel.
Code:
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
thead, tbody, tfoot, tr {
  width: inherit;
}
th, td {
  box-sizing: border-box;
  vertical-align: top;
  text-align: left;
  font: 400 14px/1.4 "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  padding: 4px 6px;
}

Dan maak je eenmalig voor elke vormgeving een class die je wel of niet in de html bij een tabel gebruikt.
Code:
/* styling tabel 1 */
.tabel-1 {
  width: 90%;       /* breedte tabel (bijv. in % of px) */
  max-width: 300px; /* max breedte tabel (bijv. in % of px)  */
  margin: 0 auto;
}
/* styling 2e en 3e kolom */
.tbl-col-2 tr :nth-child(2),
.tbl-col-3 tr :nth-child(3) {
  width: 30%;
  color: #33c;
  text-align: right;
}
/* styling cellen in 4e rij */
.tbl-tr-4 tr:nth-child(4) td {
  background-color: #f7c0c0;
}
/* styling cel omlijning */
.tbl-border {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
.tbl-border th,
.tbl-border td {
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}
/* styling striped rijen */
.tbl-striped tr:nth-of-type(even) {
  background-color: #f7f7c0;
}
/* styling th header */
.tbl-th th {
  font-weight: 600;
  border-bottom: 2px solid grey;
}

De class'es kan je per stuk of gecombineerd in de html gebruiken. De naam van een class mag je zelf verzinnen, bijvoorbeeld de naam .tbl-striped { ... } heb ik zelf verzonnen. De naam in de css moet natuurlijk wel overeenkomen met de naam in de html. Voorbeeld html waarin ik alle class'es heb gebruikt.
Code:
<div class="tabel-1">
  <table class="tbl-col-2 tbl-col-3 tbl-border tbl-tr-4 tbl-striped tbl-th">
  <thead>
  <tr>
    <th>Maand</th><th>Aantal</th><th>Besteld</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januari</td><td>100</td><td>40</td>
  </tr>
  <tr>
    <td>Februari</td><td>80</td><td>20</td>
  </tr>
  <tr>
    <td>Maart</td><td>120</td><td>110</td>
  </tr>
  <tr>
    <td>April</td><td>160</td><td>0</td>
  </tr>
  <tr>
    <td>Mei</td><td>90</td><td>10</td>
  </tr>
  <tr>
    <td>Juni</td><td>130</td><td>30</td>
  </tr>
  <tr>
    <td>Juli</td><td>70</td><td>50</td>
  </tr>
  <tr>
    <td>Augustus</td><td>130</td><td>60</td>
  </tr>
  </tbody>
  </table>
</div>


Suc6. Have fun.
 
Laatst bewerkt:
Geprobeerd CSS toe te passen - volgende 2 style-codes samen werken niet - afzonderlijk wél
(1 tot aan 606060) werkt enkel als (2) uitgeschakeld is
Bedoeling is (1) en (2) samen toe te passen enkel op 1 specifieke tabel A (en dus niet op vb. tabel B en niet op C en niet op ... van dezelfde pagina)
Zijn de codes in die optiek combineerbaar ?
Dank voor tips.

(1)
table th {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #606060;
}


table {
border-collapse: collapse;
}

th, td {
padding: 3px;
}


(2)
.strip tr:nth-child(even) {
background-color: #f7f7c0;
}
 
Je gebruikt .strip tr:nth-child(even) in de css.
Heb je dan dit in de html:
Code:
<table class="strip">
 
Wat is je gehele css?
Kan je die hier tussen
Code:
 en
zetten (voor betere leesbaarheid)?
 
Een element meer dan hierboven vermeld (alle test zijn uitgeschakeld)

Code:
table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #c0c0c0; /*zonder is transparant*/  
}

table, tr {    
    border: 1px solid #ddd;
}


table {
    border-collapse: collapse;
}

th, td {
    padding: 3px;
}


.strip tr:nth-child(even) {
  background-color: #f2f2f2;
}
 
Sticky werkt niet (of beperkt) op wat oudere browsers (Edge, Firefox, Chrome, enz.)
Dat gezegd hebbende is dit hieronder de beste manier voor een sticky header in een tabel.

Zet om een tabel altijd een <div> en geef deze verplicht een breedte. Bij een "sticky header" moet bij deze <div> ook verplicht een hoogte worden opgegeven. In de css zie je waar de width en height bij .div_table_A { ... } zijn opgegeven.
Code:
<div class="div_table_A">
  <table>
    <thead>
      <tr>
        <th>Maand</th>
	  <th>Aantal</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Januari</td>
	  <td>100</td>
      </tr>
      <tr>
        <td>Februari</td>
	  <td>80</td>
      </tr>
    </tbody> 
  </table>
</div>

Css voor een tabel en wat extra css voor een tabel die in een <div class="div_table_A"> ..... </div> zit
Code:
table {
  width: 100%;
  border-collapse: collapse;
}
table, table * {
  box-sizing: border-box;
}
thead, tbody, tfoot, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  padding: 3px;
}

/* hieronder vormgeving div_table_A */

.div_table_A {
  width: 400px;        /* nodig voor scrollbar */
  height: 145px;       /* nodig voor sticky */
  overflow-y: scroll;  /* verticale scrollbar */
}
.div_table_A,
.div_table_A tr {    
  border: 1px solid #ddd;
}
.div_table_A th {
  position: sticky;
  top: 0;
  background-color: #c0c0c0;
}
.div_table_A table tr:nth-child(even) {
  background-color: #f2f2f2;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan