[HTML/CSS] Printen van een veld

[Theske]

Goedemorgen,

Ik heb een website gemaakt mbv tabellen (en php) en nu wil ik graag de mogelijkheid dat ik een van deze velden kan uitprinten, dus eigenlijk gewoon een <td>.
Ik weet niet of dit uberhaupt mogelijk is...... want anders moet ik gewoon lekker knutselen en voor elke pagina een aparte print pagina maken en dat kost, zoals jullie ongetwijfeld zullen weten, weer een hoop tijd.
Dus mijn vraag is of jullie een manier/mogelijkheid weten waarmee is dus een enkel veld van een pagina kan uitprinten.
Greetzz

[P_de_B]

Je kunt met behulp van CSS de pagina er voor het printen heel anders uit laten zien.

Kijk bijvoorbeeld eens hier, of ga eens [google=print css]

[Verwijderd]

Misschien kan je via javascript de inhoud van die bepaalde td in een ander venster openen en daar een print-functie voorzien (eveneens in javascript).

Anders zul je het toch serverside moeten oplossen vrees ik.
Misschien kan je ook eens kijken naar wat css: met @print of @screen geloof ik.

[Theske]

Okej bedankt, ik zal kijken of ik hier wat mee kan.
Ook zal ik even kijken of het mogelijk is met javascript.
Bedankt.

edit::
Zo te zien kan je met css inderdaad alleen voor een mooie printopmaak zorgen, maar dat is niet echt een zorg....
Ik heb wel even gezocht naar de manier om met javascript de inhoud van mn <td> op te pakken en te plaatsen in een nieuwe pagina maar kan niet echt iets vinden.
Weten jullie misschien waar ik op moet zoeken of toevallig hoe het moet?

[ Voor 60% gewijzigd door Theske op 25-10-2005 09:04 ]

[Verwijderd]

Ik heb nog minder even gezocht denk ik.

http://www.google.be/sear...vascript+cell+table&meta=

eerste link

http://www.mozilla.org/docs/dom/technote/tn-dom-table/


Vooral dit stukje code lijkt me daaruit interessant

JavaScript:

mybody=document.getElementsByTagName("body").item(0);
mytable=mybody.getElementsByTagName("table").item(0);
mytablebody=mytable.getElementsByTagName("tbody").item(0);
myrow=mytablebody.getElementsByTagName("tr").item(1);
mycel=myrow.getElementsByTagName("td").item(1);
// first item element of the childNodes list of mycel
myceltext=mycel.childNodes.item(0);
// content of currenttext is the data content of myceltext
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);

voorbeeldje staat hier http://www.mozilla.org/do...n-dom-table/sample1a.html

[ Voor 75% gewijzigd door Verwijderd op 25-10-2005 09:17 ]

[frickY]

Je kunt met behulp van de media print { } container in je CSS specifieke style-regels aangeven voor het printen van het document.
Zo kun je bijv alles wat je niet wilt printen weghalen met "display: none";

Als je maar 1 TD wilt printen kun je die bijvoorbeeld de claa "welprinten" geven. In je CSS doe je dan iets als

Cascading Stylesheet:

@media print {
  * {
    display: none
  }
  td.welprinten {
    display: table-cell
  }
}

Zie deze pagina voor meer info; http://www.w3schools.com/css/css_mediatypes.asp

[ Voor 23% gewijzigd door frickY op 25-10-2005 09:22 ]

[Theske]

Danku
Tja, ik zat ook in het nederlands te zoeken, vandaar misschien wat minder juiste resultaten
Enjoy Ur day!

[-FoX-]

Maar is het niet zo dat een browser default de te printen webpagina url ook mee afdrukt?
Is daar eigenlijk een mogelijkheid voor om dat ook te omzeilen?

[Theske]

Koptekst verwijderen in browser

EDIT:::

Ik heb in mijn stylesheet het volgende neergezet

Cascading Stylesheet:

@media print {
  * {
    display: none
  }
  td.welprinten {
    display: table-cell
  }
}

En in mijn pagina code

HTML:

<td class="welprinten" valign="top">

Als ik nu een pagina wil printen, krijg ik een lege pagina met alleen de kop- en voettekst
Wat heb ik foutgedaan??
In mijn td zitten ook weer een aantal tabellen en td's, die ik ook apart heb proberen te 'classen'.
Iemand een oplossing hiervoor?? zodat hij wel netjes zijn stylesheet opvolgt oid

EDIT2:
Ik had trouwens ook al geprobeerd om een aparte stylesheet aan te maken met media=print, maar dat mocht ook niet baten.

[ Voor 87% gewijzigd door Theske op 25-10-2005 10:05 ]

[-FoX-]

Theske schreef op dinsdag 25 oktober 2005 @ 09:50:
Koptekst verwijderen in browser

Ahja, en daar werd een oplossing naar voren gedragen?

[Theske]

-FoX- schreef op dinsdag 25 oktober 2005 @ 09:59:
[...]

Ahja, en daar werd een oplossing naar voren gedragen?

Nee, dat niet. maar er staat volgens mij in dat het niet mogelijk is om het te verwijderen.

[bigbeng]

Het printen van de kop is volgens mij een browserinstelling en maakt geen deel uit van de HTML of CSS standaard. Dit betekent dus dat het of niet te onderdrukken is, of als dat wel kan, dat dat dan browser specifiek zal zijn. Al je DHTML nachtmerries komen weer tot leven

[Theske]

En weet er toevallig nog iemand wat ik hier fout doe?? waarom hij die de class 'welprinten' pakt, zodat hij niks weergeeft bij het printen??

"
Ik heb in mijn stylesheet het volgende neergezet

Cascading Stylesheet:

@media print {
  * {
    display: none
  }
  td.welprinten {
    display: table-cell
  }
}

En in mijn pagina code

HTML:

<td class="welprinten" valign="top">

Als ik nu een pagina wil printen, krijg ik een lege pagina met alleen de kop- en voettekst
Wat heb ik foutgedaan??
In mijn td zitten ook weer een aantal tabellen en td's, die ik ook apart heb proberen te 'classen'.
Iemand een oplossing hiervoor?? zodat hij wel netjes zijn stylesheet opvolgt oid

Ik had trouwens ook al geprobeerd om een aparte stylesheet aan te maken met media=print, maar dat mocht ook niet baten.
"

[NMe]

Clienside spul mag in Webdesign & Graphics.

PW>>WG

[Skaah]

Ik denk dat je de tabel, tr en alle andere meuk waar je td in zit ook zichtbaar moet maken.

[Theske]

Mijn website bestaat uit een tabel die weer meerdere tabellen bevat.
Deze tabellen staan dus in de <td>'s van de 'hoofdtabel', dus ik neem aan dat wanneer ik een <td> uit mijn hoofdtabel deze class toewijs hij gewoon deze <td><table><tr><td></td><td></td></tr><table> enz..... </td> weergeeft.
Dus wat gaat hier nou fout????

[Theske]

Ik ben er dus achter gekomen dat table-cell NIET met IE werkt...
http://www.handleidinghtm...chrijving.html#table-cell
Weet iemand misschien een alternatief hiervoor??

edit:
zonder javascript als het kan.......
ik had google ook al geraadpleegd, maar die kwam voor zover ik zag niet echt met een uitkomst

[ Voor 26% gewijzigd door Theske op 25-10-2005 12:29 ]

[Woy]

Theske schreef op dinsdag 25 oktober 2005 @ 12:26:
Ik ben er dus achter gekomen dat table-cell NIET met IE werkt...
http://www.handleidinghtm...chrijving.html#table-cell
Weet iemand misschien een alternatief hiervoor??

edit:
zonder javascript als het kan.......
ik had google ook al geraadpleegd, maar die kwam voor zover ik zag niet echt met een uitkomst

Kan je niet gewoon inline meegeven in plaats van table-cell. Table-cell is immers CSS 2.0 en die wordt idd nog niet ondersteund door IE.

[Theske]

rwb schreef op dinsdag 25 oktober 2005 @ 12:50:
[...]

Kan je niet gewoon inline meegeven in plaats van table-cell. Table-cell is immers CSS 2.0 en die wordt idd nog niet ondersteund door IE.

Ja, dat snapte ik dus... maar heeft inline hetzelfde principe als table-cell??
Ik kwam ergens tegen dat je het bij <div> moet gebruiken.... ik heb het als id en als class geprobeerd maar het doet het allemaal niet.
Ik snap er niks meer van

ik heb nu in mijn stylesheet het volgende (dit is een gedeelte ervan)::

Cascading Stylesheet:

.td_tussen
{
height:10;
background-color:#FFFFFF;
}
.td_field
{
background-color:#F2F2F2;
border:0;
vertical-align:top;
}
.td_tussen_vert
{
width:15
}

@media print 
{
  * {
    display: none;
  }
  .td_welprinten {
    display: inline;
  }
}

En hieronder is een gedeelte van de structuur van de website, ik heb een hoop content weggehalen om het overzichtelijker te maken. In de <td>'s staan dus ook nog wat extra tabellen.

HTML:

<table>
  <tr>
   <td class="td_head">
     Overzicht
   </td>
  </tr>
  <tr>
   <td>
    <table>
       <tr>
         <td valign="top">
           <table>
            <tr>
             <td>
             <div id="list"><? include ('overzichtP.htm'); ?></div>
             </td>
            </tr>
           </table>
         </td>
         <td class="td_welprinten" valign="top">
          <div id="list_main_pr">
            <table>
              <tr>
               <td valign="top">
                    <table>
                     <tr>
                      <td>
                        <table>
                        <tr>
                         <td class="td_head">
                         </td>
                        </tr>
                        <tr>
                         <td class="td_tussen">
                         </td>
                        </tr>
                        <tr>
                         <td class="td_field">
                         </td>
                        </tr>
                        </table>
                      </td>
                     </tr>
                     <tr>
                      <td>
                      </td>
                     </tr>
                    </table>
              </td>
             </tr>
            </table>
         </div>
         </td>
        </tr>
    </table>
   </td>
  </tr>
</table>

Ik hoop dat jullie aan de hand van deze code mij verder kunnen helpen, want ik snap er echt niks meer van

Ik had trouwens met dezelfde code, alleen dan in de style 'table-cell' ipv ' inline' gezet en in FF geprobeerd, maar dat werkte ook niet