I have a problem when generating a loop of tables from html to pdf on xamarin, all I print are 33 tables but it is cut at number 14 and it is cut at the end of the page instead of skipping the page in pdf, I have tried various css properties, including if conditions to manually add a div with the class or style of page-break and it still doesn't give me the page break, does anyone know about ?
I am using a html template to replace the html and then generate the pdf.
Html -->
<html lang="en">
<head>
<title>HOJA DE HORAS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css">
<style type="text/css">
html {
height: 0;
}
body {
margin-top: 20px;
color: #484b51;
}
.text-secondary-d1 {
color: #728299 !important;
text-align: center;
}
.page-header {
margin: 0 0 1rem;
padding-bottom: 1rem;
padding-top: .5rem;
border-bottom: 1px dotted #e2e2e2;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
.page-title {
padding: 0;
margin: 0;
font-size: 1.75rem;
font-weight: 300;
}
.brc-default-l1 {
border-color: #dce9f0 !important;
}
.ml-n1, .mx-n1 {
margin-left: -.25rem !important;
}
.mr-n1, .mx-n1 {
margin-right: -.25rem !important;
}
.mb-4, .my-4 {
margin-bottom: 1.5rem !important;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);
}
.text-grey-m2 {
color: #888a8d !important;
}
.text-success-m2 {
color: #86bd68 !important;
}
.font-bolder, .text-600 {
font-weight: 600 !important;
}
.text-110 {
font-size: 110% !important;
}
.text-blue {
color: #478fcc !important;
}
.pb-25, .py-25 {
padding-bottom: .75rem !important;
}
.pt-25, .py-25 {
padding-top: .75rem !important;
}
.bgc-default-tp1 {
background-color: rgba(121,169,197,.92) !important;
}
.bgc-default-l4, .bgc-h-default-l4:hover {
background-color: #f3f8fa !important;
}
.page-header .page-tools {
-ms-flex-item-align: end;
align-self: flex-end;
}
.btn-light {
color: #757984;
background-color: #f5f6f9;
border-color: #dddfe4;
}
.w-2 {
width: 1rem;
}
.text-120 {
font-size: 120% !important;
}
.text-primary-m1 {
color: #4087d4 !important;
}
.text-danger-m1 {
color: #dd4949 !important;
}
.text-blue-m2 {
color: #68a3d5 !important;
}
.text-150 {
font-size: 150% !important;
}
.text-60 {
font-size: 60% !important;
}
.text-grey-m1 {
color: #7b7d81 !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.breakpoint {
border: none;
page-break-inside:auto;
}
</style>
</head>
<body>
<div class="page-content container">
<div class="page-header text-blue-d2" style="width: 100%;">
<h1 class="page-title text-secondary-d1" style="text-align: center; width: 100%;"> HOJA DE HORAS </h1>
</div>
<div class="row mt-4">
<div class="col-12 col-lg-12">
<!-- #region Header -->
<div class="row">
<div class="col-sm-6">
<table>
<tr>
<td>
<span class="text-secondary-d1 text-105">Refno:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Refno%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Fecha:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Date%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Controlador:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%EmRgCode%} {%EmRgName%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Movil:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%DeviceCode%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Cod.Seg.:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%SecurityCode%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Long./Lat.:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Longitude%} / {%Latitude%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Notes:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Notes%}</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-6 align-self-start d-sm-flex justify-content-end">
<table>
<tr>
<td>
<span class="text-secondary-d1 text-105">Proyecto:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%ProjectCode%} {%ProjectDesc%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Localización:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Location%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Brigada:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%LbCrewCode%} {%LbCrewName%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Empleados:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%WorkForce%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Horas Netas:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%NetTime%} | {%NetHours%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Supervisor:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Supervisor%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Estatus:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Status%} | {%InterfaceStatus%}</span>
</td>
</tr>
</table>
</div>
</div>
<!-- #endregion -->
<!-- #region Content -->
<div class="breakpoint">
{%Body%}
</div>
<!-- #endregion -->
<!-- #region BarCode -->
<div>
<img src="data:image/png;base64, {%Barcode%}" />
</div>
<!-- #endregion -->
<!-- #region Footer -->
<div style="margin-top:100px;">
<div class="row">
<div class="col-sm-4">
<hr align="left" />
<span class="text-secondary-d1 text-105">Firma Controlador</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<hr align="right" />
<div class="align-self-start d-sm-flex justify-content-start">
<span class="text-secondary-d1 text-105">Firma Supervisor</span>
</div>
</div>
</div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</body>
</html>
Void
private async void PreparePDF(LbRg pdfLbRg)
{
try
{
LbRgLnService lbRglnService = new LbRgLnService();
var mLbRgLns = lbRglnService.GetLbRgLnsByLbRgId(pdfLbRg.LbRgId);
var htmlTemplate = Common.GetFileToString("LaborRegister.html");
string bodyContent = "";
int i = 0;
int linecounter = 0;
int page = 1;
// Add Lines
foreach (var lnRgLn in mLbRgLns.OrderBy(x => x.LbRgLnId))
{
string mainDiv = "<div class='mt-4' >" + Environment.NewLine;
string divRow = "<div class='row'>" + Environment.NewLine;
bodyContent += mainDiv + divRow + divMainCol1Close + divMainCol2Close + " </div>" + Environment.NewLine ;
linecounter++;
if (page == 1 && linecounter == 7)
{
bodyContent +="<div class='body' style='page-break-after: always'></div>";
linecounter = 0;
page++;
}
else
{
if (page > 1 && linecounter == 10)
{
bodyContent +="<div class='body' style='page-break-after: always'></div>";
linecounter = 0;
page++;
}
}
bodyContent += "</div>";
i++;
}
htmlTemplate = htmlTemplate.Replace("{%Body%}", bodyContent);
#endregion
if (pdfLbRg.Barcode.IsNotNullOrEmpty())
{
var imageBase64 = Xamarin.Forms.DependencyService.Get<IBarcodeService>().ConvertImageStream(pdfLbRg.Barcode);
var base64 = Common.ConvertToBase64(imageBase64);
htmlTemplate = htmlTemplate.Replace("{%Barcode%}", base64);
}
//Ajuste 2022-12-16
//string fileName = "LbRg_" + pdfLbRg.Refno + "_" + DateTime.Now.Ticks + ".pdf";
string fileName = "RPMO_" + pdfLbRg.EmRgCode + "_" + pdfLbRg.Refno + "_" + DateTime.Now.ToString("yyyyMMdd") + ".pdf";
var path = Xamarin.Forms.DependencyService.Get<IHtmlToPDF>().SafeHTMLToPDF(htmlTemplate, fileName);
if (path.IsNotNullOrEmpty() && path != "Access to the path")
{
Utility.DisplayInfo.ShowLoader();
await Task.Delay(5000);
Utility.DisplayInfo.HideLoader();
await Xamarin.Essentials.Launcher.OpenAsync(new Xamarin.Essentials.OpenFileRequest("PDF", new Xamarin.Essentials.ReadOnlyFile(path)));
}
else
{
await DisplayAlert("Error", path, "Ok");
}
}
catch (Exception ex)
{
await DisplayAlert("Exception", ex.Message, "Ok");
}
}
Part of Service
if (webpage == null)
webpage = new Android.Webkit.WebView(GetApplicationContext());
int width = 2102;
int height = 2973;
webpage.Layout(0, 0, width, height);
webpage.LoadDataWithBaseURL("", html, "text/html", "UTF-8", null);
webpage.SetWebViewClient(new WebViewCallBack(file.ToString()));
System.IO.File.WriteAllText(file.ToString(), html, Encoding.UTF8);
Resolve this issue as soon as possible.
Related
I have tried to use vertical-align:middle both in css and in the select object, but still the select box is aligned to the bottom of the table row.
CSS file
.td_button_bar {
background-color: #eaf2f8;
border: none;
left:10px;
margin-left:10px;
vertical-align:middle;
}
.tr_button_bar {
max-height: 60px;
margin-top: 0px;
top: 0px;
vertical-align: middle;
}
Razor code
<table class="page_header">
<tr>
<td class="page_header"> ⓘInfo: #TagService.Message_CNC_Status</td>
</tr>
<tr class="tr_button_bar">
<td class="td_button_bar" align="left" >
<button class="button_1" disabled="#TagService.IsDisabled_Read_Drive_Monitor" #onclick="Read_Drive_Monitor"><img class="button_image" src="images/play.svg"><br>Start</button>
<button class="button_1" disabled="#TagService.IsDisabled_Stop_Drive_Monitor" #onclick="Stop_Drive_Monitor"><img class="button_image" src="images/stop.svg"><br>Stop</button>
<select style="width:150px; height:30px ;vertical-align:middle;display:inline-block" value="#TagService.Drive_Monitor_selected_AX_No" class="Dep" disabled="#TagService.IsDisabled_Drive_Monitor_selected_AX" #onchange="func_AX_select" #onclick="Read_NC_AX_List_MD10000">
<option value="-1">--Select AX--</option>
#for (int j = 0; j < 31; j++)
{
var jj = j;
var kk = j + 1;
if (Deltalogic.NC_AX_List_MD10000[j] == "")
{
break;
}
<option value=#kk>#Deltalogic.NC_AX_List_MD10000[j]</option>
}
</select>
</td>
</tr>
Try using built-in Bootstrap classes: Grid system and apply align-self-center
Here is a jsFiddle:
https://jsfiddle.net/maciekn/Lx40s7wk/
<table class="container">
<tr>
<td class="page_header"> ⓘInfo: </td>
</tr>
<tr class="tr_button_bar">
<td class="td_button_bar" align="left" >
<div class="row">
<div>
<button class="button_1" ><br>Start</button>
</div>
<div>
<button class="button_1" ><br>Stop</button>
</div>
<div class="align-self-center">
<select style="width:150px; height:30px ;vertical-align:middle;display:inline-block">
<option value="-1">--Select AX--</option>
#for (int j = 0; j < 31; j++)
{
var jj = j;
var kk = j + 1;
<option value=#kk></option>
}
</select>
</div>
</div>
</td>
</tr>
</table>
When the button active is clicked it is replaced by deactive button and vice versa this is going all good in size greater than 768px but when the screen size is smaller than 768px the button active is not replaced by deactive button rather the two-button appears at a different position in toggling on the small screen
I think changes should be in display property when the screen is <=768px that it adjust it in a way that in toggling the button replaces each other in exactly the same position as it is working on big screen.
My code:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You have protected spaces after each span and therefor the line isn't empty and therefor isn't hidden. To prevent the issue you have to omit these. You could instead define a margin for the spans:
.statusButtons span {
margin-right: 3px;
}
Working example:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
.statusButtons span {
margin-right: 3px;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Goal:
Display the icon on the upper left of the selected td when you have the cursor over the td.
Problem:
I have tried to find different solution but it doesn't go so well.
Thank you!
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>
You need to set the td to have relative positioning and the icon to have absolute positioning. Then you can position it using left and top.
table.glyphicon-hover .glyphicon {
visibility: hidden;
position:absolute;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
background-color: green;
left: 0;
}
.table td {
position: relative
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>
See the below code
new class added .topleftIcon
All I'm doing is floating the icon to the left.
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
.topleftIcon{
float:left;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up topleftIcon"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up topleftIcon"></span>
</td>
</tr>
</table>
</div>
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.
I would like to create a question row like this http://imageshack.us/photo/my-images/200/questionh.png/
At this time, my html source is :
<p class="questionrow">
<span class="question">question label</span>
<span class="reponses">
<input type='radio' class="radiocontrol"/><label class="radioanswer">Oui</label>
<input type='radio' class="radiocontrol"/><label class="radioanswer">Non</label>
</span>
</p>
(but i can change it)
ths css is :
.questionrow
{
width:1000px;
background-color: #EDF2BE;
}
.question
{
width: 300px;
padding-left: 30px;
padding-right: 30px;
display: inline-block;
}
.reponses
{
width: 600px;
display: inline-block;
}
.radiocontrol {
border: 1px solid #006;
background: #ffc;
}
I'd like to have 2 effects :
I would like to put the label outside, on top of the colored line. I would like to have the label on the same column of the radio button.
I would like to draw a vertical line (but I imagine it will be easy if there is a solution for the previous)
Does someone has some idea about that ?
Regards
Here is a solution that closely resembles your sample image...
Demo: http://jsfiddle.net/Zjnw9/1/
HTML...
<div class="row">
<p class="q">This is a question?</p>
<ul class="options">
<li><label>One</label><input type="radio" /></li>
<li><label>Two</label><input type="radio" /></li>
<li><label>Three</label><input type="radio" /></li>
<li><label>Four</label><input type="radio" /></li>
</ul>
</div>
CSS...
.row {
padding-bottom: 2em;
}
.q {
background-color: #EDF2BE;
margin-top: 1.2em;
padding: 0.5em;
}
.options {
float: right;
margin-top: -3.4em;
}
.options li {
float: left;
width: 100px;
text-align: center;
border-left: 1px solid #999;
padding: 0em 0.5em 0.7em;
}
.options label {
display: block;
font-size: 9pt;
padding-bottom: 0.8em;
}
Use tables instead? span is pretty meaningless for this. This is exactly what tables are meant for.
<table>
<tr>
<th></th>
<th><label for="radio1">Label 1</label></th>
<th><label for="radio2">Label 2</label></th>
<th><label for="radio3">Label 3</label></th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet.</td>
<td><input type="radio" name="group" id="radio1" /></td>
<td><input type="radio" name="group" id="radio2" /></td>
<td><input type="radio" name="group" id="radio3" /></td>
</tr>
</table>
Here is a CSS solution, without a table.
div {float:left;padding:0 1em; border-right:1px solid gray; height:50px;}
<div>
<p>question label</p>
</div>
<div>
<label>Oui</label><br />
<input type='radio'/>
</div>
<div>
<label>Non</label><br />
<input type='radio'/>
</div>
Works in FF and Chrome for me.